Question

我正在使用同位素和图像加载到创建全宽网格，该网格具有不同的高度元素（对于此示例，我保持它们的高度相同）。但是我在填充空间全宽的网格时遇到了问题。

即使百分比加起来，它们也没有对齐，我无法弄清楚原因。我正在努力实现以下目标：

| 50％| 30％| 20％|

然而，div目前下降了20％，看起来像这样：

| 50％| 30％|

| 20％| ＆lt; ---下降但应该高于

以下是我的代码：

<div class="lesarticles">
  <article>
    <img src="img/img.png">
    <h2>Title</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
  </article>

  <article>
    <img src="img/img2.png">
    <h2>Title 2</h2>
    <p>Ut rutrum nulla ex, id vulputate libero dignissim eget. Sed non tellus posuere, porttitor metus nec, faucibus nulla. Duis ut nunc viverra, tristique erat ut, ultricies leo. Pellentesque non tristique metus. Integer faucibus ornare diam at ornare.
      Etiam ut nisl quis velit bibendum mattis quis at nulla.</p>
  </article>

  <article>
    <img src="img/img3.png">
    <h2>Title 3</h2>
    <p>Nulla facilisi. Suspendisse pretium venenatis mauris, sed molestie tortor tempor vitae. Morbi semper mi id semper finibus.</p>
  </article>

  <article>
    <img src="img/img4.png">
    <h2>Title 4</h2>
    <p>Curabitur vel orci orci. Nulla nec suscipit elit, id auctor elit. Fusce hendrerit dolor eget nibh aliquet luctus. Fusce ut tempor nulla, eget cursus libero. Maecenas lobortis accumsan ipsum, eu porta enim elementum nec.</p>
  </article>

  <article>
    <img src="img/img5.png">
    <h2>Title 5</h2>
    <p>Curabitur vel orci orci. Nulla nec suscipit elit, id auctor elit. Fusce hendrerit dolor eget nibh aliquet luctus. Fusce ut tempor nulla, eget cursus libero. Maecenas lobortis accumsan ipsum, eu porta enim elementum nec.</p>
  </article>

  <article>
    <img src="img/img6.png">
    <h2>Title6</h2>
    <p>Curabitur vel orci orci. Nulla nec suscipit elit, id auctor elit. Fusce hendrerit dolor eget nibh aliquet luctus. Fusce ut tempor nulla, eget cursus libero. Maecenas lobortis accumsan ipsum, eu porta enim elementum nec.</p>
  </article>
</div>

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  percentPosition: true,
  columnWidth: '.grid-sizer'
});
// layout Isotope after each image loads
$grid.imagesLoaded().progress(function() {
  $grid.isotope();
});

.grid {
  background: #EEE;
  max-width: 1800px;
  margin: 0 auto;
}


/* clearfix */

.grid:after {
  content: '';
  display: block;
  clear: both;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}


/* ---- grid-item ---- */

.grid-sizer,
.grid-item {
  width: 20%;
}

.grid-item {
  float: left;
  background: #D26;
}

.grid-item--width2 {
  width: 50%;
  background: blue;
}

.grid-item--width3 {
  width: 30%;
  background: red;
}

Answer 1

一些问题。首先，您不正确地声明columnWidth，因此它实际上并没有对它做任何事情。根据{{3}}：

应该是这样的

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

接下来尝试拆分像这样的项目和sizer CSS选择器。我还将sizer更改为10％宽度，因为当网格项宽度不是grid-sizer的倍数时，我之前遇到过类似布局的问题。

.grid-sizer {
  width: 10%;
}

.grid-item {
  width: 20%;
}

第二行仍然存在问题，但这是因为HTML中的布局甚至不适合该行。

Answer 2

以前没有使用过Isotope，但我想你需要添加layoutMode: 'fitRows'

以下是updated fiddle

同位素和图像加载布局不填充空间全宽

2 个答案: