Question

我正在使用Packery layout mode in Isotope JS。我正在使用砌体，但我发现使用这种模式我得到了更理想的结果，但我完全乐于接受其他选择。我也使用它与引导响应网格集成，如here所述。除了一件事，一切都很好。

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

以下是一些可视化的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)

这是一个复制品：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

有什么想法吗？谢谢！

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>

Isotope JS Packery Tile Gaps

1 个答案: