1

这是一个自我问答

通常我的创意总监会要求构建一个 Masonry 供电的网格，但要使其具有响应性。然后新版本的 Masonry可以做到这一点，但是对于可变高度的图像，初始布局看起来很糟糕。解决方案是imagesLoaded插件，但目前尚不清楚将其应用于网格的最佳方法，特别是如果该网格是由 CMS（在我的情况下为 WordPress）生成的。

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

4

2 回答 2

3

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

显然，您需要在页面上包含 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');
    });  

});
于 2015-10-10T23:46:00.563 回答
1

我建议使用同位素而不是砌体，因为它更先进！它与砌体非常相似，您的 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 并在加载图像时更新布局，你需要 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使用这个插件你可以很容易地指定项目，每个分辨率的列数等等，它还具有添加过滤器、排序和搜索字段的功能，试试吧！

于 2017-03-07T16:45:03.723 回答