同位素砌筑问题答案

【问题标题】：Isotope masonry issue同位素砌筑问题
【发布时间】：2015-09-27 06:42:11
【问题描述】：

这快把我逼疯了！

我的容器 div 是 1170px 宽。我试图在里面放置 3 个 div。一个是275px 宽，第二个是580px 宽，第三个是275px 宽。所以总共 - 1130px。

而且我无法将第三个与其他两个放在同一行。无论我使容器 div 有多宽，它都会下降。

请帮忙，我的大脑快要爆炸了..

HTML：

   <div class="container">
        <div class="row">
            <div class="grid">

                <div class="grid-item">
                    <img src="img/portfolio1.jpg" alt="">
                </div>

                <div class="grid-item width-double">
                    <img src="img/portfolio2.jpg" alt="">
                </div>

                <div class="grid-item">
                    <img src="img/portfolio3.jpg" alt="">
                </div>

            </div>
        </div>
    </div>

CSS：

.grid {

    .grid-item {
        padding: 0;

        width: 275px;
        height: 275px;
        float: left;

        &.width-double {
            width: 580px;
        }

        &.height-double {
            height: 580px;
        }
    }

}

JS：

$grid.isotope({
     itemSelector: '.grid-item',
     layoutMode: 'masonry'
});

http://codepen.io/anon/pen/meORoL

【问题讨论】：

你能创建一个类似的demo。因为Container和Row div的CSS也需要帮助你。
是的，这里是：codepen.io/anon/pen/meORoL

标签： javascript jquery html css jquery-isotope

【解决方案1】：

Demo

var $grid = $('.grid');
$grid.isotope(
{
      itemSelector: '.grid-item',
      masonry: 
      {
          columnWidth:1
      }
});

你必须像这样设置列的宽度

【讨论】：

【解决方案2】：

Diptox 的回答有效，但我不知道这是否是处理这种情况的最佳方法。

理想情况下，您应该自己设置 columnWidth，但如果未设置，则由网格中第一项的大小决定。网格中断的原因是网格中较大的项目不是第一个项目的偶数倍。它的宽度为 580 像素，而 columnWidth（在本例中由第一项确定）的宽度为 275 像素，因此它不“适合”由 Masonry 设置的 275 像素宽度的列数组。如果将其设置为 275px 的偶数倍，例如 550px (275 * 2 = 550)，它会按预期工作。

我不知道将 columnWidth 设置为 1 是否有什么需要担心的，但我觉得它并不理想，否则它将是默认值——尽管它可能根本没有问题。

编辑：忘记添加代码

CSS：

.grid-item.width-double {
  width: 550px;
}

Javascript：

$grid.isotope({
  itemSelector: '.grid-item',
  masonry: {
        columnWidth: 275,
    }
});

http://codepen.io/anon/pen/MabJdw

【讨论】：