Pinterest样式布局 - 当某些图像具有相同的高度时

时间:2015-09-28 12:13:46

标签: jquery css pinterest masonry

我正在与Freewall.js合作创建一个Pinterest风格的布局。它看起来不错,除非最顶层的一些图像具有相同的高度。然后它看起来像一个网格而不是一个砖石。

无论如何,对于高度相同的图像(如果它们彼此相邻),高度可以变化吗?

我无法控制图片尺寸,因为它会由第三方上传。

我使用的是基本pinterest layout from Freewall

以下是代码:

JS:

var wall = new freewall("#freewall");
        wall.reset({
            selector: '.brick',
            animate: true,
            cellW: 200,
            cellH: 'auto',
            onResize: function() {
                wall.fitWidth();
            }
        });

        wall.container.find('.brick img').load(function() {
            wall.fitWidth();
        });

HTML:

<div id="freewall" class="free-wall">
        <div class="brick">
            <img src="i/photo/1.jpg" width="100%">
            <div class="info">
                <h3>Freewall</h3>
                <h5>Pinterest layout</h5>
            </div>
        </div>
        <div class="brick">
            <img src="i/photo/2.jpg" width="100%">
            <div class="info">
                <h3>Freewall</h3>
                <h5>Pinterest layout</h5>
            </div>
        </div>
...
</div>

感谢。

0 个答案:

没有答案