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

Question

我有一个由三种不同大小的div组成的packery.js布局。我希望它们在每次加载页面时都以随机顺序出现，但到目前为止，我只能将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放错了顺序还是什么的，但我不知道——我真的很感激能朝着正确的方向努力！

谢谢。

Answer 1

只对内容进行降分的原因是，您正在对div.grid-item的子节点而不是div.grid的子节点进行排序

其次，我认为packery正在为网格项节点添加绝对定位。因此，除非，否则修复js代码不会反映正确的定位

position: relative !important;
left: 0 !important;
top: 0 !important;

被添加到CCD_ 3类中。

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

Answer 2

所以我想明白了，以防有人想知道。

HTML(内联CSS只是为了说明div按顺序随机化，而不仅仅是内容(：

<div class="container">
<div class="grid">
<div class="grid-item">
<div style="background-color: red;" class="grid-item-content expand">
<p>content here #1</p>
</div>
</div>
<div class="grid-item">
<div style="background-color: blue;" class="grid-item-content expand">
<p>content here #2</p>
</div>
</div>
<div class="grid-item">
<div style="background-color: green;" class="grid-item-content expand">
<p>content here #3</p>
</div>
</div>
<div class="grid-item">
<div style="background-color: yellow;" class="grid-item-content expand">
<p>content here #4</p>
</div>
</div>
<div class="grid-item">
<div style="background-color: orange;" class="grid-item-content expand">
<p>content here #5</p>
</div>
</div>
<div class="grid-item">
<div style="background-color: purple;" class="grid-item-content expand">
<p>content here #6</p>
</div>
</div>
</div>
</div>

CSS：

.expand {
display: block;
width: 150px;
height: 150px;
}
.expand:hover {
cursor: pointer;
}
.grid-item-content {
width: 150px;
height: 150px;
border: 1px solid black;
}
.grid-item--large {
width: 520px;
height: 375px;
}

&JS:

$(document).ready(function () {
var $grid = $(".grid").packery({
itemSelector: ".grid-item"
});
$grid.on("click", ".expand", function (event) {
$(event.currentTarget).toggleClass("grid-item--large");
$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);
$("div.grid").randomize("div.grid-item");

代码笔链接：https://codepen.io/ddmmyyyy/pen/OJyQmQz