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％。

不好意思，如果布局不正确，您的示例链接就会关闭。

砌体网格高度相同

1 个答案: