在砌体中随机化砖块

Posted 2023-02-25

【中文标题】在砌体中随机化砖块

【英文标题】：Randomize bricks in Masonry

【发布时间】：2011-06-27 08:35:40

【问题描述】：

是否可以在 JQuery 插件 Masonry 中随机化砖块，以便每次页面加载时查看不同的排列？据我所知，没有随机选项。

谢谢！

【参考方案1】：

我认为更适合您的插件是 Isotope，它的构建方式与 Masonry 相同（并且由同一个人！），但内置了排序和过滤功能

【讨论】：

是的，有一个简单的 $container.isotope('shuffle');选项:)

同位素的问题是它不能在没有许可证的情况下用于商业产品。

【参考方案2】：

(function($) 

$.fn.randomize = function(childElem) 
  return this.each(function() 
      var $this = $(this);
      var elems = $this.children(childElem);

      elems.sort(function()  return (Math.round(Math.random())-0.5); );  

      $this.remove(childElem);  

      for(var i=0; i < elems.length; i++)
        $this.append(elems[i]);      

  );    

)(jQuery);


$(window).load(function()
  $(masonry-container).randomize(masonry-brick).masonry('reload');
);

【参考方案3】：

我在 jQuery 论坛上找到了答案，并根据自己的需要对其进行了一些调整。简而言之 - 您将 html 位拉入 masonry() 持有人并随机化集合，然后将其放回：

  $(document).ready(function()
    var ar = $('#masonry').children();
    ar.sort(function(a,b)
      // Get a random number between 0 and 10
      var temp = parseInt( Math.random()*10 );
      // Get 1 or 0, whether temp is odd or even
      var isOddOrEven = temp%2;
      // Get +1 or -1, whether temp greater or smaller than 5
      var isPosOrNeg = temp>5 ? 1 : -1;
      // Return -1, 0, or +1
      return( isOddOrEven*isPosOrNeg );
    );
    $('#masonry').html(ar);
    $('#masonry').masonry( 
      columnWidth:220,
      animate: true
    );
  );

【讨论】：

我似乎无法让它工作 - 这是否取代了 html 中的砌体脚本 - #masonry 是容器，.children 是 div 上的类吗？

由于砌体的性质，我认为这行不通。

上面的 sn-p 效果很好。您需要更改#masonry 的所有实例以匹配您的砌体容器。此外，您可以使用 $('#masonry').masonry('reload');如果网格已经上线，则在随机播放之后。