我有一个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,但是我无法弄清楚-我非常希望朝正确的方向前进!
谢谢。
仅将内容归类的原因是因为您正在对div.grid-item
的子节点而不是div.grid
的子节点进行排序>
第二,我认为包装厂正在为网格项目节点添加绝对定位。因此,除非
,修复js代码不会反映正确的位置position: relative !important; left: 0 !important; top: 0 !important;
已添加到
.grid-item
类。