同位素自动高度修复

Question

我的布局有问题，请在下面找到图片。我该如何修复此布局？我希望高度为自动尺寸，宽度为（容器宽度/ 5）

提前致谢！

CSS

.element-item {
  position: relative;
  float: left;
    width:20%;
  -webkit-box-shadow: 2px 2px 5px rgba(136, 136, 136, 0.8);
-moz-box-shadow:    2px 2px 5px rgba(136, 136, 136, 0.8);
box-shadow:         2px 2px 5px rgba(136, 136, 136, 0.8);
}

PHP循环

<div class='element-item $folder' data-category='$folder'>
<div class='portfolio-thumb'>
<figure>
<a href='$file' class = 'fancybox' data-fancybox-group='$folder'><img class = 'lazy' data-original='$thumb'' /></a>
</figure>
</div>
</div>

JQuery代码：

     var $win = $(window),
        $con = $('.isotope'),
        $imgs = $("img.lazy"),
        scroll = $('body').scrollTop();

  var $width = $con.hasClass("no-space") ? 0 : 20;

  var $container = $con.isotope({
        itemSelector: '.element-item',
        // options...
        percentPosition: true,
        resizable: false, // disable normal resizing
        // set columnWidth to a percentage of container width
        columnWidth: $con.width() / 5,
        masonry: { columnWidth: $con.width() / 5 },
        filter: '.cables'
  });

  var event = $.Event( "click" );

Answer 1

我也遇到了问题，可以使用以下代码解决

$(window).bind("load", function () {

        // Run Masonry ( isotope )
        $container.isotope({
            itemSelector: '.item',
            layoutMode: 'masonry',
            stamp: '.item--static',
            percentPosition: true,
            resizesContainer: true,
            resizable: true,
        });
    });

Answer 2

使用Isotope加载图像时需要使用imagesloaded.js，以便加载所有图像后布局。 如果您使用的是Isotope v2，则需要下载imagesloaded，将其加载到您的页面中，然后将代码设置为：

 $con.imagesLoaded( function() {
 $con.isotope({
    itemSelector: '.element-item',
    // options...
    percentPosition: true,
    resizable: false, // disable normal resizing
    // set columnWidth to a percentage of container width
    columnWidth: $con.width() / 5,
    masonry: { columnWidth: $con.width() / 5 },
    filter: '.cables'
 });
});