アイソトープjQueryプラグインを使用した石積みの追加

Question

同じPSDデザインと同じアイソトーププラグインを使用して、メーソンリーベースのフィルタリングポートフォリオページを構築したいが、機能しない。コードを実行すると、石積みは機能していますが、画像の高さは機能しません。 PSDのデザインと同じデザインではないコードを実行すると、PSDのすべての画像が同じ高さと幅の異なる画像になります。

私は別の方法を試みていますが、同じPSDデザインと同じではありません。ここで

[Psd portfolio design[1] design different is height--- 
    [output is][2] 

     [1]: https://i.stack.imgur.com/Ia5bj.jpg 
     [2]: https://i.stack.imgur.com/i2gad.jpg 

は、HTMLマークアップです：

<div class="grid"> 
    <div class="col-md-4 grid-item bath house electric"> 
     <figure> 
      <img src="images/portfolio/1.jpg" alt=""> 
       <figcaption> 
        <a href="images/portfolio/1.jpg"></a> 
       </figcaption> 
     </figure> 
    </div> 
    <div class="col-md-4 grid-item office bath paint"> 
     <figure> 
      <img src="images/portfolio/2.jpg" alt=""> 
       <figcaption> 
        <a href="images/portfolio/2.jpg"></a> 
       </figcaption> 
     </figure> 
    </div> 
    <div class="col-md-4 grid-item electric paint house"> 
     <figure> 
      <img src="images/portfolio/3.jpg" alt=""> 
       <figcaption> 
        <a href="images/portfolio/3.jpg"></a> 
       </figcaption> 
     </figure> 
    </div> 
    <div class="col-md-4 grid-item office bath electric house"> 
     <figure> 
      <img src="images/portfolio/4.jpg" alt=""> 
       <figcaption> 
        <a href="images/portfolio/4.jpg"></a> 
       </figcaption> 
     </figure> 
    </div> 
    <div class="col-md-4 grid-item electric office bath paint"> 
     <figure> 
      <img src="images/portfolio/5.jpg" alt=""> 
       <figcaption> 
        <a href="images/portfolio/5.jpg"></a> 
       </figcaption> 
     </figure> 
    </div> 
    <div class="col-md-4 grid-item paint"> 
     <figure> 
      <img src="images/portfolio/6.jpg" alt=""> 
       <figcaption> 
        <a href="images/portfolio/6.jpg"></a> 
       </figcaption> 
     </figure> 
    </div> 
</div> 

メインのjQuery：

<script src="js/vendor/jquery-3.2.0.min.js"></script> 

アイソトープメインのjQuery

<script src="js/imagesloaded.pkgd.min.js"></script>  

jQueryのアクティベーションコードが

です

 $('.grid').isotope({ 
      itemSelector: '.grid-item', 
      percentPosition: true, 
      masonry: { 
      // use outer width of grid-sizer for columnWidth 
      columnWidth: '.grid-item' 
      } 
     }) 

Answer 1

あなたの投稿されたコードでは、isotope.pkgd.min.jsは読み込まれておらず、imagesloaded.pkgd.min.jsのみ読み込まれています。さらに、実際には画像読み込み用のコードを使用していません。アイソトープがそのレイアウトを行う前に、すべての画像がロードされるようにする必要があります。 これはimagesloadedを利用したコードです：

<script src="js/vendor/jquery-3.2.0.min.js"></script> 
<script src="js/isotope.pkgd.min.js"></script> 
<script src="js/imagesloaded.pkgd.min.js"></script>  

<script> 
$(document).ready(function() { 
$('.grid').imagesLoaded(function() { 
    $('.grid').isotope({ 
     itemSelector: '.grid-item', 
     percentPosition: true, 
     masonry: { 
     // use outer width of grid-sizer for columnWidth 
     columnWidth: '.grid-item' 
     } 
    }); 
    }); 
    }); 
</script>