我正在使用 jquery isotope 编写一个 Web 应用程序，但我看到了一些我无法弄清楚的奇怪显示行为。该应用程序的要点是，它从 Web 服务下载一些数据，并以两种模式之一显示给用户，基于图块的模式和基于表格的模式。该代码将数据放入单独的 div 中，对每个 div 调用 isotope()，然后根据用户单击的某些按钮隐藏或显示它们。
当您调整页面大小时，问题就来了。如果您这样做，当前未显示的视图显然会变得混乱。您可以在此处查看我在 jsfiddle 中提炼的示例：
重现步骤：
- 转到 jsfiddle 页面
- 点击右上角的“表格模式”。您应该看到瓷砖被一张桌子取代。
- 移动显示渲染输出的 jsfilddle 窗格或仅调整浏览器的大小。
- 点击右上角的“平铺模式”。您应该会看到瓷砖再次出现，但它们将全部堆叠在一起，而不是从左到右的流动。
- 再次调整 jsfiddle 或浏览器的大小。瓷砖将移动到适当的位置。
- 再次单击“表格模式”。您会看到表格的行太短，并且没有显示所有行。
- 调整浏览器的大小，他们会自行纠正。
实际上，我使用带有下划线模板的主干来处理大部分 html 生成，但在 jsfiddle 示例中，它只是硬编码的 html。
您不能同时运行多个同位素实例吗？
这是代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.isotope,
.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: -o-transform, opacity;
transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
</style>
<style>
div.controls {
height: 150px;
margin-top: 20px;
}
div.content {
margin-left: 180px;
min-height: 500px;
}
div.tile {
width: 175px;
margin: 0px 10px 10px 0px;
height: 100px;
background-color: gray;
position: relative;
padding: 10px;
}
.headerRow {
display: inline-block;
background-color: #f3f3f3;
border-bottom: solid orange 1px;
font-size: 12pt;
padding: 8px;
}
.tableRow {
font-size: 12pt;
background-color: white;
padding: 10px;
border-bottom: solid #cfcfcf 1px;
cursor: pointer;
}
.headerCol, .dataCol {
display: inline-block;
cursor: pointer;
}
.titleCol {
width: 250px;
}
.dateCol {
width: 150px;
}
.btnTileView, .btnTableView {
float: right;
cursor: pointer;
text-decoration: underline;
margin-right: 20px;
}
</style>
</head>
<body>
<div>
<div class="controls">
<span class="btnTableView">Table mode</span>
<span class="btnTileView">Tile mode</span>
</div>
<div class="content">
<div class="tileContent">
<div class="tile">
item 1
</div>
<div class="tile">
item 2
</div>
<div class="tile">
item 3
</div>
<div class="tile">
item 4
</div>
<div class="tile">
item 5
</div>
<div class="tile">
item 6
</div>
<div class="tile">
item 7
</div>
<div class="tile">
item 8
</div>
<div class="tile">
item 9
</div>
<div class="tile">
item 10
</div>
</div>
<div class="tableWrapper">
<div class="headerRow">
<div id="tableTitleHeader" class="headerCol titleCol"><span>Title</span></div>
<div id="tableDateHeader" class="headerCol dateCol"><span>Uploaded</span></div>
</div>
<div class="tableContent">
<div class="tableRow">
<span class="dataCol titleCol">item 1</span>
<span class="dataCol dateCol">8/1/2013</span>
<div class="tableRow">
<span class="dataCol titleCol">item 2</span>
<span class="dataCol dateCol">8/2/2013</span>
</div>
<div class="tableRow">
<span class="dataCol titleCol">item 3</span>
<span class="dataCol dateCol">8/3/2013</span>
</div>
<div class="tableRow">
<span class="dataCol titleCol">item 4</span>
<span class="dataCol dateCol">8/4/2013</span>
</div>
<div class="tableRow">
<span class="dataCol titleCol">item 5</span>
<span class="dataCol dateCol">8/5/2013</span>
</div>
<div class="tableRow">
<span class="dataCol titleCol">item 6</span>
<span class="dataCol dateCol">8/6/2013</span>
</div>
<div class="tableRow">
<span class="dataCol titleCol">item 7</span>
<span class="dataCol dateCol">8/7/2013</span>
</div>
<div class="tableRow">
<span class="dataCol titleCol">item 8</span>
<span class="dataCol dateCol">8/8/2013</span>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<script>
$(document).ready(function() {
$(".tileContent").isotope({
itemSelector : ".tile",
layoutMode : "fitRows",
animationEngine: "best-available",
animationOptions: {
duration: 500,
easing: "linear",
queue: false
}
});
$(".tableContent").isotope({
itemSelector : ".tableRow",
layoutMode : "straightDown",
animationEngine: "best-available",
animationOptions: {
duration: 500,
easing: "linear",
queue: false
}
});
$(".tileContent").show();
$(".tableWrapper").hide();
$(".btnTileView").click(function() {
$(".tileContent").show();
$(".tableWrapper").hide();
});
$(".btnTableView").click(function() {
$(".tableWrapper").show();
$(".tileContent").hide();
});
});
</script>
</div>
</body>
</html>