同位素砌体问题

Question

这让我发疯！

我的容器 div 是 1170px 宽。我试图在里面放置 3 divs。第一个 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

Answer 1

Demo

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

您必须像那样设置列的宽度 smthng

Answer 2

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

理想情况下，您可以自己设置 columnWidth，但如果未设置，则由网格中第一项的大小决定。你的网格被破坏的原因是因为网格中较大的项目不是第一个项目的偶数倍。它的宽度为 580px，而 columnWidth（在本例中由第一项确定）的宽度为 275px，因此它没有 "fit" 进入 Masonry 设置的 275px 宽度的列数组。如果它被设置为 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

同位素砌体问题

Isotope masonry issue

javascript

jquery

html

css

jquery-isotope