jquery - 砌体网格等高

Question

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

提前感谢您的帮助

Answer 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%。

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