如何动态添加砌体元素后更新航点位置

Question

我目前正在尝试构建一个具有pinterest样式外观的移动页面来显示图像。

为了能够在特定列中显示不同维度的图像，我决定使用masonry作为布局引擎。 为了触发加载新元素，我选择了waypoints

动态地向我的砌体容器添加元素效果很好（当使用按钮添加它们时）。

当我在容器末端设置一个航点以自动填充新元素时，这个航点会在第一次滚动到它时被触发（div在页面底部带有黑色背景）。

添加元素后，航点不会更新为再次指向页面底部。相反，它似乎在添加新元素之前坚持原始位置。

当您查看我的jsfiddle时，您可以看到以下行为： 元素在加载时添加到容器中。当您向下滚动时，您将到达航点（黑色条使其可见），并且在我的砌体容器的末尾添加了新元素。 再次向下滚动到底部（再次黑色条）时，没有任何反应。 向上滚动到页面顶部然后向下滚动后，您将看到在页面中间再次触发航点（航点的旧位置）。

据我了解航点，看起来我必须在更改DOM后再次重置/重新计算航点，所以我尝试在添加元素后在第51行添加$.waypoints('refresh');，但这会导致浏览器挂起并直接触发航点很多次（超过200），所以当你删除浏览器可能卡住或崩溃的评论时要注意......

所以最后这里有一个问题：我是如何动态添加我的元素并且仍然更新路点以便能够延迟加载新元素，每当我滚动到底部？

Answer 1

在最后摧毁航点，然后重建它

替换脚本末尾的set timeout函数，如下所示

var footerWaypoint = $('#nextImageResults');
footerWaypoint.waypoint(getNextResults, {
    offset: '100%'
});

function getNextResults(direction){
    if(direction == "down") {
        $('#imageListContainer').css('background-color', 'red');
        var elems = addElements(20);
        addMasonry('#imageListContainer', elems);
        $('#imageListContainer').css('background-color', 'green');
        footerWaypoint.waypoint('destroy');
        footerWaypoint.waypoint(getNextResults, {
           offset: '100%'
        });
    }       
}

Reinit的回答 Reinitialize waypoint

Answer 2

您只需致电Waypoint.refreshAll();，而不是销毁并重新创建它。例如：

var myWayPoint = new Waypoint({
    element: document.getElementById('my-element'),
    handler: function(dir) {
        if('down' === dir) {

            // ...
            // Add your elements here
            // ...

            Waypoint.refreshAll();
        }
    }
});