在砌体中动态加载内容

时间:2017-03-09 23:05:47

标签: javascript jquery html layout masonry

我用砖石来安排" 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 但没有成功。

如何在不重新加载页面的情况下重新加载砌体,以便正确排序我的元素?

0 个答案:

没有答案