Question

所以我非常熟悉我会说的砌体，但我之前没有这么做过。

我知道在通过ajax加载页面后将项添加到网格中的“附加”方法，但这并不是我想要做的。

我的网格结构在通过ajax调用之前根本不存在。

例如（伪代码）：

页面加载
用户点击链接
AJAX调用，返回HTML字符串并通过jQuery添加到dom。
需要基于此HTML实例化砌体网格。

基本上，通过AJAX返回的HTML看起来像这样：

<div class="grid-57">
    <a class="item" href="http://www.example.com">
        <img src="http://fpoimg.com/350x350"/></a> 
    </a>
    <a class="item" href="http://www.example.com">
        <img src="http://fpoimg.com/350x250"/></a> 
    </a>
    <a class="item" href="http://www.example.com">
        <img src="http://fpoimg.com/350x450"/></a> 
    </a>
</div>

因为你可以看到我没有添加到现有的网格或砌体，我需要在成功返回AJAX时创建一个新的。

我的JS看起来像这样：

$('.get-grid').click(function(e){
    var id = $(this).data('id');
    $.post(ajaxurl, { action: 'get_grid', id: id  }, function(response) {

        // Append this html to the area of the site where I have the grids. 
        $('.all-the-grids').append(response);

        // Here is where i need to actually turn this HTML that I just added into a masonry object and lay it out.
        var $container = $('.grid-' + id);
        msnry = new Masonry( $container[0], {
            columnWidth: 188,
            itemSelector: '.item',
            gutter: 10
        }); 
        msnry.on('layoutComplete', function(){
            // never making it in here.
        }); 
    });
});

知道怎么做吗？

修改

看来我的网格布局正确，没有错误，但它永远不会到达layoutComplete回调。

Answer 1

以与通常使用Masonry相同的方式进行，事实上你在回调中这样做并没有真正改变任何事情。

$('.get-grid').click(function(e){
    var id = $(this).data('id');
    $.post(ajaxurl, { action: 'get_grid', id: id  }, function(response) {

        // Append this html to the area of the site where I have the grids. 
        var grids = $('.all-the-grids');
        grids.append(response);
        var msnry = new Masonry(grids[0], {
        });
    });
});

Answer 2

当您在布局中使用图像时，首先要做的是等待所有图像加载到该元素中然后实例化。请尝试下面的代码

$containers = $('.all-the-grids');
$containers.append(response).imagesLoaded(function() { 
   $containers.masonry({
      itemSelector: '. a'
   }); 
});

注意：imagesLoaded是一个jQuery插件

砌体：在AJAX回调上创建网格

2 个答案: