Question

我有一个包含4个选项的选择框，选择每个选项将导致删除所有现有的.item div并加载新的.items，然后使用同位素重新对齐它们。

$('.menu-select').change(function(){
    var selected=$('.menu-select-option:selected').html().toLowerCase();
        if(selected=='all')
            {
                loadContent('mixed_home_all.html');
            }
        if(selected=='recommended')
            {
                loadContent('mixed_home_reco.html');
            }
        if(selected=='popular')
            {
                loadContent('mixed_home_pop.html');
            }
});

loadContent函数如下所示：

    function loadContent(filename){
        var $item=$('.item');
        $container.isotope('remove', $item);
        $container.load(filename, function(){
            $container.imagesLoaded(function(){
                $container.isotope('reLayout');
            });
        });
    }

由于某种原因，reLayout无效。类isotope-item也未添加到单个项目中。这在控制台日志中没有错误。

Answer 1

我通过破坏先前的同位素并为选择框中的每个值触发一个新同位素来解决这个问题。我的loadContent函数现在看起来像这样：

    function loadContent(filename){
        var $item=$('.item');
        $container.isotope('destroy'); //destroying isotope
        $container.load(filename, function(){
            $container.imagesLoaded(function(){
                $container.isotope({ //triggering isotope
                    itemSelector: '.item'
                });
            });
        });
    }

Answer 2

如果您使用带有 Axios 的 Vue JS 将数据加载到您的同位素中，那么这里的问题是在构建 DOM 时数据不可用，这就是为什么在没有任何数据的情况下渲染同位素。经过一番尝试，我找到了解决方法。

确保在 jquery 之后加载 jquery-isotope，否则它会抛出“$ 未定义”。
确保仅在 ajax 调用成功后才调用 $('element').isotope({...})。

在下面的屏幕截图中，如果您检查在 ajax 调用成功后正在加载的 custom.js，包含调用 $('element').isotope({...}) 的 initIsotope 方法。只有这一次在渲染同位素时数据可用，所以它工作正常！

无论如何，我希望这个答案对您有所帮助。

Isotope不能使用ajax加载的内容

2 个答案: