Question

这是一个自我Q＆amp; A

我的创意总监经常要求建造一个砌体动力网格，但要让它具有响应性。然后new version of Masonry可以做到这一点，但是对于可变高度的图像，初始布局看起来很糟糕。解决方案是imagesLoaded插件，但并不是立即明确将其应用于网格的最佳方式，特别是如果该网格是由CMS生成的（在我的情况下是WordPress）。

所以我的问题是，如何最好地制作响应性的砌体网格，即3个colomns宽，并且在初始加载时看起来很好。

Answer 1

对于3列响应网格，每个块周围有25px的排水沟。我有可能使这个排水沟响应/变量。

显然，您需要在页面上包含Masonry和imagesLoaded JS文件。

您的HTML将是这样的：

<div class="grid">
    <div class="block">
        <img src="example.jpg">
    </div>
</div>

你的CSS就是这样：

.block {
    float: left;
    margin-bottom: 25px;
    width: calc(33.33% - 17px);
    opacity: 0;
}
.block img {
    width: 100%;
    height: auto;
}

JS就是这样的：

jQuery(document).ready(function(){

    // Init Masonry
    var opts = {
        itemSelector: '.block',
        columnWidth: '.block',
        gutter: 25,
        percentPosition: true,
        transitionDuration: 0
    }
    var $grid = jQuery('.grid').masonry(opts);        

    // Position and show image as it loads
    jQuery('.grid').imagesLoaded().progress(function(imgLoadData, elem ){
        jQuery(elem.img).closest('.block').css('opacity', 1);
        $grid.masonry('layout');
    });  

});

Answer 2

我建议使用Isotope而不是Mason，因为它更先进！它与砌体非常相似，你的HTML就是这样的：

<div class="grid">
    <div class="item"> <img src="test.jpg"> </div>
    <div class="item"> <img src="test.jpg"> </div>
    <div class="item"> <img src="test.jpg"> </div>
    <div class="item"> <img src="test.jpg"> </div>
</div>

如果你想要3列，那么CSS就是这样：

.item {
   float: left;
   width: 33.33%;
}

.item img {
   width: 100%;
   display: block;
}

然后在JS中你需要初始化Isotope并在图像加载时更新布局，你需要图像加载插件的帮助，它应该是这样的：

jQuery(document).ready(function(){

     // Initialize Isotope

     $('.grid').isotope({
        itemSelector: '.item',
        percentPosition: true,
     });

     // Refresh the layout of the grid each time an image gets loaded

     $('.grid').imagesLoadedMB().progress( function() {
        $('.grid').isotope('layout');
    });

});

我个人更喜欢使用准备使用的插件，例如：https://codecanyon.net/item/media-boxes-portfolio-responsive-grid/5683020使用此插件，您可以非常轻松地指定项目之间的空间，每个分辨率上的列数等等，它具有添加过滤器，排序和搜索字段的能力，试一试！

制作三列响应式砌体网格

2 个答案: