Question

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

之前我看过一些这样的问题，但答案总是无用的，例如＆＃39;使用bootstrap＆＃39;。我已经尝试过bootstrap网格，骨架网格等等。他们都不能处理重叠列的元素。

我现在正在使用Mansonry js库，而我几乎就在那里。只有一个我无法解决的故障。当我制作2x2元素时，Mansonry出于某些原因并不喜欢。它打破了排水沟（即使我在元素宽度中包含确切的装订线尺寸）。

需要注意的是，我使用了变量（百分比）元素宽度和基于该宽度的高度。

我的测试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

你好，我自己。我解决了我测试过：砌体，嵌套，骷髅，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％（使用填充顶部的高度为高度）。

Mansonry布局响应天沟

1 个答案: