砌体布局响应式排水沟

Question

我正在尝试制作类似 mansonry 的布局，但元素具有响应大小。虽然大小是有限的，但它们只能是小矩形的倍数。我的想法是我可以拥有 1x1、1x2、2x2、2x1 的元素，以尽可能适合页面中的最佳位置。

我之前看到过一些这样的问题，但答案总是像“使用引导程序”这样无用的东西。我已经尝试过引导网格、骨架网格和许多其他方法。它们都不能处理与列重叠的元素。

我现在正在使用 Mansonry js 库，而且我快到了。只有一个故障是我无法解决的。 Mansonry 出于某种原因不喜欢我制作 2x2 元素。它打破了排水沟（即使我在元素宽度中包含了确切的排水沟尺寸）。

注意事项，我使用可变（百分比）元素宽度和基于该宽度的高度。

我的测试 html 部分：

<div class="container">
    <div class="grid">
        <div class="grid-sizer"></div>
        <div class="gutter-sizer"></div>
        <!-- Exemplo divisão -->
        <div class="grid-item"> </div>
        <div class="grid-item"> </div>
        <div class="grid-item grid-item--width2"> </div>
        <div class="grid-item"> </div>
        <div class="grid-item"> </div>
        <div class="grid-item"> </div>
        <div class="grid-item"> </div>
        <div class="grid-item"> </div>
        <div class="grid-item"> </div>
    </div>
</div>

我的 CSS：

.container {
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}

.grid-sizer,
.grid-item {
    width: 33%;
    background-color: #666;
    margin-bottom: 0.20%;
    margin-top: 0%;
}
.gutter-sizer { width: 0.5%; }

.grid-item:before{
    content:"";display:block;padding-top:50%;
}

.grid-item--width2{
    width: 66.5%;
    background-color: #555;
}

这让我着迷：http://s23.postimg.org/knxbt44xn/gutter.png

Answer 1

你好，我自己。 我解决了。我测试过：Masonry、Nested、Skeleton、Boostrap、（手动执行）、（一些 cms 插件）...

最后，答案是：Freewall。 https://github.com/kombai/freewall

这个插件解决了垂直和水平的嵌套和排水沟。如果您按比例设置宽度和高度，它就可以工作。实际上，根据我的测试，它适用于您设置的任何内容。也有很多选择。我喜欢它！

<div class="container">
    <div id="freewall">
        <!-- Exemplo divisão -->
        <div class="brick"> </div>
        <div class="brick two"> </div>
        <div class="brick"> </div>
        <div class="brick"> </div>
        <div class="brick tall"> </div>
        <div class="brick"> </div>
        <div class="brick"> </div>
        <div class="brick"> </div>
    </div>
</div>

我的最终js：

// jQuery
$(document).ready(function() {
    var wall = new freewall("#freewall");
    wall.reset({
        selector: '.brick',
                    cellW: 320,
                    cellH: 160,
                    fixSize: 0,
                    gutterX: 5,
                    gutterY: 5,
                    onResize: function() {
                        wall.fitZone();
                    }
    });

    $(window).trigger("resize");
});

css 只是将宽度设置为 33%（宽度为 66%），正常高度为 50%，高度为 100%（高度基于宽度，使用 padding top）。