同位素和图像加载布局未填充 space 全宽

Question

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

尽管百分比相加，但它们并不一致，我不明白为什么。我正在努力实现以下目标：

| 50% | 30% | 20% |

但是 div 目前下降了 20%，看起来像这样：

| 50% | 30% |

| 20% | <--- 下降但应该高于

下面是我的代码：

// 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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4.1.4/imagesloaded.pkgd.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3.0.5/dist/isotope.pkgd.min.js"></script>

<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item grid-item--width2">
    <img src="http://via.placeholder.com/30x387" alt="">
  </div>
  <div class="grid-item grid-item--width3 ">
    <img src="http://via.placeholder.com/30x387" alt="">
  </div>
  <div class="grid-item ">
    <img src="http://via.placeholder.com/30x387" alt="">
  </div>
  <div class="grid-item ">
    <img src="http://via.placeholder.com/30x387" alt="">
  </div>
  <div class="grid-item grid-item--width3 ">
    <img src="http://via.placeholder.com/30x387" alt="">
  </div>
  <div class="grid-item ">
    <img src="http://via.placeholder.com/30x387" alt="">
  </div>
  <div class="grid-item grid-item--width2 ">
    <img src="http://via.placeholder.com/30x387" alt="">
  </div>
</div>

Answer 1

以前没有用过同位素，但我想你需要添加 layoutMode: 'fitRows'

这里是updated fiddle

Answer 2

几个问题。首先，您错误地声明了 columnWidth，因此它实际上并没有对它做任何事情。根据 Isotope documentation:

应该是这样的

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

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

.grid-sizer {
  width: 10%;
}

.grid-item {
  width: 20%;
}

第二行仍然中断，但那是因为您 HTML 中的布局甚至不适合该行。

同位素和图像加载布局未填充 space 全宽

isotope and images loaded layout not filling space full width

javascript

html

css

jquery-isotope

jquery-masonry