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>

使用isotope jQuery插件添加砖石

1 个答案: