javascript - 如何使用同位素 js 获得这种特定的砌体布局(仅关闭一个网格项!)？

Question

我确定您听说过 isotope.js，但这里是该元素的一部分的链接:https://isotope.metafizzy.co/layout-modes/masonry.html

这是我想要的所需布局的图像:

这是我能得到的最接近布局的代码笔:https://codepen.io/levijosman/pen/GdewvN

我试过更改元素的顺序(基于布局宽度)，切换到不同的布局模式(如 Packery)。如您所见，我与预期的布局只有一个网格元素。布局必须使用 isotope.js 才能实现，或者根本不可能？

<h1>Isotope - masonry layout mode</h1>
<div class="container">
<div class="grid">
  <div class="grid-item grid-item--width2 grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item grid-item--width2 grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>  
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>  
</div>

.grid-item {
  float: left;
  width: 313.81px;
  height: 200px;
  margin-left: 10px;
  margin-bottom: 10px;
  background: #0D8;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.7);
}

.grid-item--width2 { width: 637.64px; }
.grid-item--height2 { height: 410px; }

Answer 1

看起来主要问题出在javascript中的itemSelector；它应该有 .grid-item 而不是 masonry，像这样:

$('.grid').isotope({
  itemSelector: '.grid-item',
  masonry: {
    columnWidth: 100, 
    gutter: 8
  }
});

然后它应该按预期流动，你只需要用另一个 grid-item div< 替换你的 grid-item--height2 类 大框之后:

<div class="grid">
  <div class="grid-item grid-item--width2 grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2 grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>  
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>  

https://codepen.io/anon/pen/WJmmej