砌体网格等高答案

【问题标题】：Masonry grid the same height砌体网格等高
【发布时间】：2014-08-08 21:07:01
【问题描述】：

尝试设置 Masonry 脚本以显示此页面上的图像：http://www.stefanheinrichs.com/projects/ 是否可以？也许还有一些其他的图书馆会更好？

提前感谢您的帮助

【问题讨论】：

让所有图片和 div 高度相同。
它不起作用。此外，所有图像必须仅在一行中具有相同的高度，并扩展到行宽。一行可以有 2-3 或 4 张图像，每行可以有不同的高度

标签： jquery jquery-masonry masonry

【解决方案1】：

如果你不介意剪裁一点，你可以得到均匀的高度......

使用背景图像和填充 50%。

HTML

<div class="masonry-grid">

    <div class="masonry-item">
        <div class="background-image" style="background-image('http://mywebsite/images/cool-image-1.jpg')">
        </div>
    </div>

    <div class="masonry-item">
        <div class="background-image" style="background-image('http://mywebsite/images/cool-image-2.jpg')">
        </div>
    </div>

    <!-- etc -->

</div>

还有 CSS

.background-image {
    padding: 50%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

您将图像设置为 div 的背景。这利用了背景覆盖 CSS 属性（这会稍微裁剪你的图像），还可以让你使用填充 50% 技巧来均衡高度。

如果您想要连续 3 个，则必须使用 33.333333%（未测试）和连续 4 个 25%。

抱歉，如果布局不正确，您的示例链接已失效。

【讨论】：