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

【问题标题】：isotope and images loaded layout not filling space full width同位素和图像加载布局未填充空间全宽
【发布时间】：2018-02-15 18:29:42
【问题描述】：

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

即使百分比加起来，它们也不会对齐，我不知道为什么。我正在努力实现以下目标：

| 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>

【问题讨论】：

标签： javascript html css jquery-isotope jquery-masonry

【解决方案1】：

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

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

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

.grid-sizer {
  width: 10%;
}

.grid-item {
  width: 20%;
}

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

【讨论】：

【解决方案2】：

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

这里是updated fiddle

【讨论】：

@probablybest 表示它们具有不同的高度元素，因此 fitRows 不是最好的布局，砖石（默认）是。