我正在使用jquery同位素编写一个Web应用程序，我看到一些奇怪的显示行为，我无法弄清楚。该应用程序的要点是它从Web服务下载一些数据，并以两种模式之一（基于图块的模式和基于表格的模式）将其显示给用户。代码将数据放入单独的div中，在每个div上调用isotope（），然后根据用户点击的某些按钮隐藏或显示它们。
调整页面大小时出现问题。如果你这样做，那么当前没有显示的视图显然会搞砸。你可以在这里看到我在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>
答案 0 :(得分：1)
尝试调用reLayout（demo fiddle）：
$(".btnTileView").click(function () {
$(".tileContent").show();
$(".tableWrapper").hide();
$(".tileContent").isotope( 'reLayout' );
});
$(".btnTableView").click(function () {
$(".tableWrapper").show();
$(".tileContent").hide();
$(".tableContent").isotope( 'reLayout' );
});
更新
我正在玩这个，并意识到你的容器上没有尺寸。
如果你想避免一些视觉布局（单列到多个）尝试这样的事情：
您仍然希望重新播放，但在某些情况下，不需要更改位置。帮助可视化正在发生的事情的一种方法是为某些包含元素添加边框，并在调整窗口大小时观察它们的调整大小。
CSS更改：
div.content {
margin-left: 180px;
min-height: 500px;
position: relative;
}
.tileContent, .tableWrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}