使用同位素jQuery插件添加砌體

我想要使用同位素插件構建基於砌體的過濾組合頁面，但是它不起作用。當運行代碼石工工作，但圖像高度不起作用。當我運行代碼時，PSD的所有圖像都是相同的高度和不同的寬度，它與PSD設計的設計不同。使用同位素jQuery插件添加砌體

我正在嘗試不同的方式，但它不是相同的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' 
      } 
     })

來源

2017-04-13 Mahbub

你可能需要添加一個$（窗口）.load（函數（）{// 運行代碼 }）;到同位素網格。我記得有一個類似的問題，圖像高度計算不正確。或嘗試$（文件）。就緒（函數（）{ $（ '網格 '）同位素（{ itemSelector：' .grid項目'， percentPosition：真實，砌築：{// 使用外寬columnWidth columnWidth：'.grid-item' } }） }）; – Cameron

或者你可能必須在CSS中給他們特定的類/高度 - 參考這個頁面http://isotope.metafizzy.co/layout-modes/masonry.html – Cameron

height：auto用於我的CSS文件中沒有窗口加載函數我的custom.js文件。整天，我只是試圖解決這個問題，使用所有類型的同位素文件，但不工作 – Mahbub

在您的發佈代碼中，您未加載isotope.pkgd.min.js，僅限imagesloadedloaded.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>

來源

2017-04-13 15:16:19 Macsupport

我正在嘗試此代碼，但不工作它是相同的結果圖像高度 – Mahbub

沒有鏈接或jsfiddle或codepen它是有點難以幫助更多。這是幾乎所有帶有圖像的同位素標準代碼。你確定所有的js腳本都被加載了嗎？控制檯中有任何錯誤？ – Macsupport

我更新了我的代碼。再試一次。我忘了在同位素代碼周圍放置腳本標籤！ oops – Macsupport

使用同位素jQuery插件添加砌體

回答

相關問題