Question

我有一个使用masonry.js的页面以pinterest类型布局平铺div。

如果我使用静态html，css和脚本工作正常但如果我使用函数加载内容则不应用砌体布局

这有效（当我将HTML直接放入.grid div中时）

<script type="text/javascript">
$(document).ready(function() {

    var $grid = $('.grid').masonry({
    // set itemSelector so .grid-sizer is not used in layout
    itemSelector: '.grid-item',
    // use element for option
    columnWidth: '.grid-sizer',
    percentPosition: true,
    gutter: 10
    })

    // layout Masonry after each image loads
    $grid.imagesLoaded().progress( function() {
    $grid.masonry('layout');
    });
    });
</script>

但是当我添加下面的函数时，它会将完全相同的HTML加载到.grid div中，但是砌体样式不起作用：

<script type="text/javascript">
$(document).ready(function() {
    var track_load = 0; //total loaded record group(s)
    var loading  = false; //to prevents multipal ajax loads
    var total_groups = <?php echo $total_groups; ?>; //total record group(s)
    var leagueid = <?php echo "1";?>;
    $('.grid').load("league_news1.php", {'group_no':track_load,'leagueid':leagueid}, function() {track_load++;}); //load first group
    });
</script>

我有办法运行吗？我已经尝试先将内容加载器放入砌体，但这不起作用。砖石应该检查内容是否先加载？如果是这样的话？我应该使用document.ready吗？

提前感谢您对此提供任何帮助！

Answer 1

加载内容后，您应该在回调中运行masonry函数：

elem

Masonry.js使用静态html但不动态添加内容

1 个答案: