制作一个三柱响应砌体网格

Question

这是一个自我问答；A

我的创意总监经常要求建造一个砖石供电的电网，但要让它做出反应。然后新版的Masonry可以做到这一点，但由于图像高度可变，最初的布局看起来很糟糕。解决方案是imagesLoaded插件，但目前还不清楚将其应用于网格的最佳方式，特别是如果该网格是由CMS(在我的情况下是WordPress(生成的。

所以我的问题是，如何最好地制作一个响应性好的砖石网格，它有3个科隆宽，在初始负载时看起来很好。

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

我建议使用同位素而不是砖石，因为它更先进！它与砖石结构非常相似，你的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中，你需要初始化同位素，并在加载图像时更新布局，你需要imagesLoaded插件的帮助，它应该看起来像这样：

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有了这个插件，你可以很容易地指定项目之间的空间、每个分辨率上的列数等等，它还可以添加过滤器、排序和搜索字段，试试吧！