如何使用packery.js以随机顺序显示div

问题描述 投票:0回答:1

我有一个packery.js布局,其中包含三种不同大小的div。我希望它们每次页面加载时都以随机顺序出现,但到目前为止,我只能将div内的内容随机化。因此,在刷新时,我以相同的顺序/模式获得了div,但是内部的内容以不同的顺序。

这是基本的HTML:

<div class="container">
  <div class="grid">
    <div class="grid-item grid-item--height2">
      <div class="grid-item-content">
        <p>content here</p>
      </div>
    </div>
    <div class="grid-item grid-item--width2">
      <div class="grid-item-content">
        <p>content here</p>
      </div>
    </div>
    <div class="grid-item">
      <div class="grid-item-content">
        <p>content here</p>
      </div>
    </div>
  </div>
</div>

这是我的CSS:

.grid {
  width: 100vw;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-item {
  float: left;
  width: 120px;
  height: 120px;
  background: #ffffff;
  border: 2px solid hsla(0, 0%, 0%, 0.5);
}

.grid-item:hover {
  cursor: pointer;
}

.grid-item--width2 { width: 240px; }
.grid-item--height2 { height: 240px; }

.grid-item--large {
  width: 480px;
  height: 300px;
  background-color: slategrey;
}

&我的Javascript:

var $grid = $('.grid').packery({
  itemSelector: '.grid-item'
});

$grid.on( 'click', '.grid-item', function( event ) {
  // change size of item by toggling large class
  $(  event.currentTarget  ).toggleClass('grid-item--large');
  // trigger layout after item size changes
  $grid.packery('layout');
});

  (function($) {

            $.fn.randomize = function(tree, childElem) {
              return this.each(function() {
                var $this = $(this);
                if (tree) $this = $(this).find(tree);
                var unsortedElems = $this.children(childElem);
                var elems = unsortedElems.clone();

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

                for(var i=0; i < elems.length; i++)
                  unsortedElems.eq(i).replaceWith(elems[i]);
              });    
            };

          })(jQuery);

          $(document).ready(function() {
              $(".container").css("display", "block");
              $("div.grid").randomize("div.grid-item");
          });

我不知道我是否只是按照错误的顺序放置了js,但是我无法弄清楚-我非常希望朝正确的方向前进!

谢谢。

javascript random packery
1个回答
0
投票

仅将内容归类的原因是因为您正在对div.grid-item的子节点而不是div.grid的子节点进行排序>

第二,我认为包装厂正在为网格项目节点添加绝对定位。因此,除非

,修复js代码不会反映正确的位置
position: relative !important;
left: 0 !important;
top: 0 !important;

已添加到.grid-item类。

为此创建了一支笔。https://codepen.io/11kodykay11/pen/xxwVOra

© www.soinside.com 2019 - 2024. All rights reserved.