使用同位素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插件添加砌体

回答

相关问题