石積みレイアウトとレイジーローディング画像を正しく積み重ねる方法は？

Question

さて、私はWordpressのためのレイジーローディングとライトボックスを使って、高度なカスタムフィールドを使用して石積みのレイアウトスタイルギャラリーを作っています。

lightbox（fancybox-v3）とmasonryレイアウト（macy.js）が動作していますが、遅延ロードを追加すると問題が発生します。

は何をします：私はjQuery.lazyとmacy.jsでこれを実行すると、私はこのようなグラグラ視覚的な結果を得るjQuery.lazy

にここに私のループだ

<?php 

// check if the repeater field has rows of data 
if(have_rows('card')): 

    // loop through the rows of data 
    while (have_rows('card')) : the_row(); 

     // display a sub field value inside a card 
     ?> <div class="grid-item"> 
      <?php 
      //VARIABLES// 
      $title = get_sub_field('card_title'); 
      $childImage = get_sub_field('card_picture'); 
      $file = get_sub_field('card_video'); 
      $video = $file['url']; 
// check for image 
      if($childImage): ?> 
       <a data-fancybox="gallery" data-caption="My caption" href="<?php 
       echo $childImage['url'];//big one here ?>"> 
        <img class="lazy" data-src="<?php echo $childImage['url']; ?>"> 
       </a> 

      <?php endif; ?> 
//check for video 
      <?php if($video): ?> 
       <video class="gallery-video" loop autoplay> 
        <source src="<?php echo $video; ?>" type="video/mp4"> 
       </video 
      <?php endif; ?> 

     </div> <?php 

    endwhile; 

else : 

    // no rows found 

endif; 

?> 

を使用しています下の方には画像の束が重なり合っているのを見ています。私はこれが怠け者であるため、macy.jsはそれらを高さで分ける方法を知らないからです。

これを修正する方法がわかりません。助言がありますか？

はまた、私はこの質問に答えるように思わklasskeことで Masonry and Lazy load integration

にこの答えを見つけましたが、私は基本的に

（私はコーディングに新しいあるデザイナーだ）、それを理解していませんKlasskeはadjustHeightsという新しい関数を作成してjQuery.lazyのオプションの中で呼び出すべきだと言っていますか？私はそれについて明確ではなかった。

最新の質問

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 関連する問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.