我用砖石来安排" item"分成一个更大的容器"一。 我有一个简单的PHP脚本(refresh.php),它返回一个div元素列表,从sql查询中填充。基本上是:
<?php
echo "<div class='item'> xxxx </div>";
echo "<div class='item'> xxxx </div>";
echo "<div class='item'> xxxx </div>";
echo "<div class='item'> xxxx </div>";
?>
当我点击链接时,我想在我的主html页面上加载这些元素,所以我添加了这个脚本:
<script type="text/javascript">
function updaten() {
$('#container').load('refresh.php');
}
</script>
然后我在html页面中添加了一个链接来运行脚本:
<a href="#" onClick="updaten()" > Update! </a>
然后在下面是带有容器div的其余html代码:
<div id='container' class='masonry js-masonry' data-masonry-options='{ "columnWidth": 500, "itemSelector": ".item" }'>
</div>
<script src="masonry.pkgd.js"> </script>
<script src="jquery-1.10.1.js"> </script>
</body></html>
如果我加载页面并单击&#34;更新!&#34;,结果将显示在页面上,但布局完全错误。物品之间有很多垂直间隙,高度不规则(但宽度均为500px)。我无法获得一个漂亮的,无间隙的布局(当我将php页面生成的代码复制/粘贴到html源代码中时,我会得到它。)
我尝试通过将其中一个添加到updaten()函数来强制重新加载,但它不起作用:
$('#container').masonry( 'reloadItems' );
$('#container').masonry( 'layout' );
控制台告诉我&#34;砌体&#34;是一种未知的财产或方法。
我也试过这个:Reloading masonry content 但没有成功。
如何在不重新加载页面的情况下重新加载砌体,以便正确排序我的元素?