限制砌体中的列数 isFitWidth 居中布局答案

【问题标题】：Limit number of columns in masonry isFitWidth centered layout限制砌体中的列数 isFitWidth 居中布局
【发布时间】：2014-05-30 09:07:26
【问题描述】：

我在这个问题上苦苦挣扎了一段时间；我正在创建这个布局：

http://www.nomdeplume.it/layout_new/

我的问题是我无法设置每行的最大元素数；我的意思是当浏览器调整大小时列数会适应，但我希望它最多为 4。

这似乎是一个平庸的问题，为什么没有选择这样做？另一种方法是设置边距或其他东西，但 isFitWidth 不适用于特定宽度或边距。

这里是代码

   $('#container').imagesLoaded( function(){
  $('#container').masonry({
   itemSelector: '.item',
   isAnimated: true,
   columWidth: 270,
   gutter: 18,
   transitionDuration: 0,
   isFitWidth: true
  });
});

css 很简单，比如 isFitWidth 选项

#container{ margin: 100px auto; }

【问题讨论】：

对不起，我用它编辑了我的答案

标签： javascript css masonry

【解决方案1】：

如果您希望最大列数为 4 列，则将砌体容器包装在另一个开发中，并为该 div 提供 4*列宽的最大宽度。

像这样：

<div class="masonry_container">
 <div id="container">
 masonry stuff here
 </div>
</div>

然后给容器一个最大宽度，如下所示：

.masonry_container {
max-width: 1080px; /* 4* masonry column width  */
}

【讨论】：