3

TL; DR：看这个小提琴——我要找的几乎都是一个JavaScript doohickey，它可以修复诸如这些浮动元素之间的间隙，而不会在调整现有库的大小时出现延迟。

加长版：据我所知，有两个主要的库用于创建紧密结合的元素墙；砌体和同位素。

然而，除了可疑的相似网站之外，这两个库在使用流体/响应元素调整视口大小时都有相同的奇怪之处。每个砌体元素首先单独调整大小（创建更大的排水沟），然后在一个节拍之后重新排列为新形式。在此处或此处查看。

看来我是唯一一个认为这很丑陋的人。

考虑到以百分比设置的元素宽度和排水沟，如何实现相同的砌体效果，但具有更多“原生”外观调整大小（即没有延迟）？

这是我现在拥有的 CSS：

#wrapper {
    width: 100%;
    overflow: hidden;
}

#wrapper > div {
    width: 46%;
    margin: 0 2% 15px;
    float: left;
}
4

1 回答 1

1

http://jsfiddle.net/UTB5C/3/

调整窗口大小后砌体选定元素的结果有点有趣，所以我在窗口上添加了一个调整大小事件，以便在调整窗口大小时重新加载

$(function () {

    $('#wrapper').masonry({
        itemSelector: 'div',
        isResizable: true,
        gutterWidth: 5
    });
    $(window).on("resize", function () {
            $('#wrapper').masonry('reload')
    });

});
于 2013-01-22T09:23:31.460 回答