【发布时间】：2017-03-09 04:41:50
【问题描述】：
我正在使用Packery layout mode in Isotope JS。我正在使用 Masonry，但我发现使用此模式可以获得更理想的结果，但我完全愿意接受其他选择。我还将它与 Bootstrap 响应式网格集成在一起使用，如 here 所述。除了一件事外，一切都很好。
我有一个单宽的瓷砖，然后是一个双宽的瓷砖，然后是几个单宽的瓷砖。 Bootstrap 4 和 3 列配置中的一切看起来都很棒。一旦我将它折叠到 2 列配置，我在第一个位置的顶部只有 1 个单宽瓷砖。双宽在下方，所有单宽瓷砖并排显示（每行 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>有什么想法吗？谢谢！
【问题讨论】：
-
您可以发布您的同位素代码，对。那是如何专有的？无论如何，有很多想法，但至少没有一些基本代码就很难。
-
@Macsupport 代码发布:)
-
我看到的两件事。您正在加载 2 个版本的 jQuery（旧的 1.12.4 和新的 3.1.1）。馊主意。您也没有加载同位素的包装布局。 isotope.pkgd.js中不包含这种布局方式，必须单独安装，Download it here
-
这两个版本的 jQuery 不是预期的。更新引用的剩余复制面食以模仿我正在工作的环境。已更正。至于 Packery 库是分开的，看起来就是这样。我会在几分钟后为其他人发布解决方案。
-
对于您将来在 Stackoverflow 上的问题，通常会让回答问题的人发布然后接受。
标签： javascript html twitter-bootstrap jquery-isotope packery