具有不同尺寸图像的中心砌体布局答案

【问题标题】：Center Masonry layout that has different sized images具有不同尺寸图像的中心砌体布局
【发布时间】：2013-04-25 08:03:17
【问题描述】：

在网格中使用三种不同尺寸的图像时，我在尝试保持 Masonry 居中时遇到了问题。

JS-

$('#container').masonry({
    itemSelector: '.item',
    //isFitWidth: true, // This setting ignores my max-width or width settings for #container but gives me the result that I'm looking for
    columnWidth: 155
});

CSS -

#container {
    max-width: 940px;
}

@media only screen and (max-width: 768px) {
    #container {
        max-width: 728px;
    }
}

HTML -

<div id="container">
    <ul>
        <li class="item">item</li>
        <li class="item">item</li>
        <li class="item">item</li>
    </ul>
</div>

使用默认宽度（940 像素）时，砌体按预期工作，但如果我尝试使用最大解决方案为 768 像素的设备查看它，则网格项目不再居中。使用当前设置可以做到这一点吗？

【问题讨论】：

标签： javascript jquery layout options jquery-masonry

【解决方案1】：

我有一个类似的问题，我解决了将最大宽度设置为外部 div 的问题。

试试这个：

$('#container').masonry({
    itemSelector: '.item',
    isFitWidth: true,
    columnWidth: 155
});

CSS

#wrapper {
    max-width: 940px;
}

@media only screen and (max-width: 768px) {
    #wrapper {
        max-width: 728px;
    }
}

HTML

<div id="wrapper">
    <div id="container">
        <ul>
            <li class="item">item</li>
            <li class="item">item</li>
            <li class="item">item</li>
        </ul>
    </div>
</div>

【讨论】：