javascript - 砌体布局响应式排水沟

Question

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

我以前看到过一些这样的问题，但答案总是一些无用的东西，比如“使用 Bootstrap ”。我已经尝试过 bootstrap grid、skeleton grid 和许多其他的。它们都不能处理重叠列的元素。

我现在正在使用 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)。