砌体 - 如何洗牌

Question

我正在为我的一个网页使用砌体脚本。

这是 JS（使用 jQuery、Typescript 和 ImagesLoaded 插件）：

$(function(){
    // or with jQuery
    var $container;

    function triggerMasonry() {
      // don't proceed if $container has not been selected
      if ( !$container ) {
        return;
      }
      // init Masonry
        $container.imagesLoaded( function() {
            $container.masonry({ 
                itemSelector : '.item',
                stamp: '.stamp',
                gutter:20
            });
        });
    }
    // trigger masonry on document ready
    $(function(){
      $container = $('#container');
      triggerMasonry();
    });
    // trigger masonry when fonts have loaded
    Typekit.load({
      active: triggerMasonry,
      inactive: triggerMasonry
    });
});  

效果很好。
但现在我需要在渲染和展示我的砖石之前对这些项目进行洗牌。这有可能吗？
我尝试使用 Isotope 并查看了 packery，但在我的网站上都没有成功。

感谢您的每一个帮助！

Answer 1

在渲染和显示项目之前对其进行洗牌

项目是否有分配给它们的任何 JavaScript 事件侦听器。 如果不是（意味着如果“容器”只包含标记而没有脚本依赖），那么我建议：

1. 创建一个数组，将每个单独的砌体项目的标记存储为 HTML 字符串。
2. 洗牌和
3. 将数组内容转储到“容器”中

肯定是粗略的解决方案。但是，希望这能完成工作。