同位素 JS Packery Tile 间隙

Question

我正在使用 Packery layout mode in Isotope JS. I was using Masonry, but I found I was getting more desirable results using this mode instead, but I’m totally open to other options. I’m also using it integrated with the Bootstrap responsive grid as described here。除了一件事之外，一切都很好。

我有一个单宽瓷砖，然后是一个双宽瓷砖，然后是几个单宽瓷砖。 Bootstrap 4 列和 3 列配置中的一切看起来都很棒。一旦我将它折叠成 2 列配置，我在第一个位置的顶部只有一个单宽瓷砖。双宽在下面，所有单宽瓷砖并排显示（每行 2 个），根据需要一直向下显示。底部甚至还剩下1块瓷砖，如果重新排列，每个单幅瓷砖都会与另一块相同类型的瓷砖配对。

以下是一些可视化的 3 种不同列配置的快速网格：

4-Columns:     3-Columns:  2-Columns:
+--+--+--+--+  +--+--+--+  +--+--+
|88|88888|88|  |88|88888|  |88|  <---this empty tile right here...
|88|88|88|88|  |88|88|88|  |88888|
|88|88|  |  |  |88|88|88|  |88|88|
+--+--+--+--+  |88|  |  |  |88|88|
               +--+--+--+  |88|88|
                           |88<------...should be filled up by this 
                           +--+--+      tile (or one before it)

这是一个重现：

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

.one {
  background-color: red;
}
.two {
  background-color: orange;
}
.three {
  background-color: yellow;
}
.four {
  background-color: green;
}
.five {
  background-color: blue;
}
.six {
  background-color: purple;
}
.seven {
  background-color: red;
}
.eight {
  background-color: orange;
}
.nine {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<div class="container-fluid">
 <div class="row">
  <div class="grid">
   <div class="grid-sizer col-xs-6 col-sm-4 col-md-3"></div>
   <div class="grid-item col-md-3 col-sm-4 col-xs-6 one">
    <div class="grid-item-content">ONE</div>
   </div>
   <div class="grid-item col-md-6 col-sm-8 col-xs-12 two">
    <div class="grid-item-content">TWO</div>
   </div>
   <div class="grid-item col-md-3 col-sm-4 col-xs-6 three">
    <div class="grid-item-content">THREE</div>
   </div>
   <div class="grid-item col-md-3 col-sm-4 col-xs-6 four">
    <div class="grid-item-content">FOUR</div>
   </div>
   <div class="grid-item col-md-3 col-sm-4 col-xs-6 five">
    <div class="grid-item-content">FIVE</div>
   </div>
   <div class="grid-item col-md-3 col-sm-4 col-xs-6 six">
    <div class="grid-item-content">SIX</div>
   </div>
   <div class="grid-item col-md-3 col-sm-4 col-xs-6 seven">
    <div class="grid-item-content">SEVEN</div>
   </div>
   <div class="grid-item col-md-3 col-sm-4 col-xs-6 eight">
    <div class="grid-item-content">EIGHT</div>
   </div>
   <div class="grid-item col-md-3 col-sm-4 col-xs-6 nine">
    <div class="grid-item-content">NINE</div>
   </div>
  </div>
 </div>
</div>

有什么想法吗？谢谢！

Answer 1

以下解决方案（归功于@Macsupport！）：

$('.grid').packery({
    itemSelector: '.grid-item',
});

.one {
  background-color: red;
}
.two {
  background-color: orange;
}
.three {
  background-color: yellow;
}
.four {
  background-color: green;
}
.five {
  background-color: blue;
}
.six {
  background-color: purple;
}
.seven {
  background-color: red;
}
.eight {
  background-color: orange;
}
.nine {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/packery@2/dist/packery.pkgd.min.js"></script>
<div class="container-fluid">
 <div class="row">
  <div class="grid">
   <div class="grid-sizer col-xs-6 col-sm-4 col-md-3"></div>
   <div class="grid-item col-md-3 col-sm-4 col-xs-6 one">
    <div class="grid-item-content">ONE</div>
   </div>
   <div class="grid-item col-md-6 col-sm-8 col-xs-12 two">
    <div class="grid-item-content">TWO</div>
   </div>
   <div class="grid-item col-md-3 col-sm-4 col-xs-6 three">
    <div class="grid-item-content">THREE</div>
   </div>
   <div class="grid-item col-md-3 col-sm-4 col-xs-6 four">
    <div class="grid-item-content">FOUR</div>
   </div>
   <div class="grid-item col-md-3 col-sm-4 col-xs-6 five">
    <div class="grid-item-content">FIVE</div>
   </div>
   <div class="grid-item col-md-3 col-sm-4 col-xs-6 six">
    <div class="grid-item-content">SIX</div>
   </div>
   <div class="grid-item col-md-3 col-sm-4 col-xs-6 seven">
    <div class="grid-item-content">SEVEN</div>
   </div>
   <div class="grid-item col-md-3 col-sm-4 col-xs-6 eight">
    <div class="grid-item-content">EIGHT</div>
   </div>
   <div class="grid-item col-md-3 col-sm-4 col-xs-6 nine">
    <div class="grid-item-content">NINE</div>
   </div>
  </div>
 </div>
</div>

同位素 JS Packery Tile 间隙

Isotope JS Packery Tile Gaps

javascript

html

twitter-bootstrap

jquery-isotope

packery