制作三列响应式 Masonry 网格

Question

这是自我问答

我的创意总监经常要求构建 Masonry 驱动的网格，但要使其具有响应性。然后是 new version of Masonry can do this, but with variable height images, the initial layout looks broken. The solution is the imagesLoaded 插件，但目前还不清楚将其应用于网格的最佳方法，特别是如果该网格是由 CMS（在我的例子中是 WordPress）生成的。

所以我的问题是，如何最好地制作一个 3 列宽且在初始加载时看起来不错的响应式 Masonry 网格。

Answer 1

对于 3 列响应式网格，每个块周围有 25 像素的装订线。我也可以制作这个排水沟 responsive/variable。

显然，您需要在页面上包含 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 而不是 Masonry，因为它更高级！它与砌体非常相似，您的 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 使用这个插件你可以很容易地指定项目之间的 space，每个项目的列数分辨率等等，它还带有添加过滤器、排序和搜索字段的功能，试试吧！

制作三列响应式 Masonry 网格

Make a three column responsive Masonry grid

responsive-design

imagesloaded

masonry