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

Question

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

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

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

当我在容器的末尾设置一个航路点以自动填充新元素时，当我第一次滚动到它时会触发该航路点（div 页面底部有黑色背景).

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

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

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

所以最后问题来了：无论何时滚动到底部，我如何动态添加我的元素并仍然更新路径点以便能够延迟加载新元素？

Answer 1

破坏最后的航路点，然后重建它

像这样替换脚本末尾的设置超时函数

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 的回答

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();
        }
    }
});

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

how to update waypoint position after adding masonry elements dynamically

jquery

jquery-mobile

jquery-masonry

jquery-waypoints