同位素和图像加载的布局未填满整个宽度

Question

我正在将同位素和图像加载到创建全宽网格中，该网格具有不同的高度元素（在本示例中，我将它们保持在相同的高度） 。 但是我在网格填充整个宽度时遇到了问题。

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

| 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

几个问题。 首先，您错误地声明了columnWidth，因此实际上并没有做任何事情。 根据同位素文档应如下所示：

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中的布局甚至不适合该行。

Answer 2

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

这是更新的小提琴