Packery js 洗牌并适合容器
Packery js shuffle and fit to container
所以我有一个 Packery 网格,希望随机排列项目,以便它们至少可以完美地组织到容器的高度...如果宽度关闭,那很好。
查看这样的布局:
<div class="grid">
<div class="grid-item grid-sizer"><img src="http://placehold.it/350x150" border="0" class="img-responsive" /></div>
<div class="grid-item"><img src="http://placehold.it/150x150" border="0" class="img-responsive" /></div>
<div class="grid-item grid-item--width2"><img src="http://placehold.it/700x250" border="0" class="img-responsive" /></div>
<div class="grid-item grid-item--width2"><img src="http://placehold.it/700x200" border="0" class="img-responsive" /></div>
<div class="grid-item"><img src="http://placehold.it/350x150" border="0" class="img-responsive" /></div>
<div class="grid-item"><img src="http://placehold.it/350x150" border="0" class="img-responsive" /></div>
<div class="grid-item"><img src="http://placehold.it/350x150" border="0" class="img-responsive" /></div>
<div class="grid-item grid-item--width2"><img src="http://placehold.it/700x200" border="0" class="img-responsive" /></div>
<div class="grid-item grid-item--width2"><img src="http://placehold.it/700x200" border="0" class="img-responsive" /></div>
<div class="grid-item"><img src="http://placehold.it/350x150" border="0" class="img-responsive" /></div>
<div class="grid-item"><img src="http://placehold.it/150x150" border="0" class="img-responsive" /></div>
<div class="grid-item"><img src="http://placehold.it/350x150" border="0" class="img-responsive" /></div>
<div class="grid-item"><img src="http://placehold.it/350x150" border="0" class="img-responsive" /></div>
</div>
一些通用样式:
.grid-sizer, .grid-item{
width: 20%;
float: left;
img{
width: 100%;
height: auto;
}
}
.grid-item--width2{
width: 40%;
}
最后,发起人:
var $grid = $('.grid').imagesLoaded( function() {
$grid.packery({
columnWidth: '.grid-sizer',
itemSelector: '.grid-item',
gutter: 0,
precentPosition: true
});
});
所以我决定,如果没有一些额外的 jquery(如果需要,我可以稍后再写),上传必须有规范。没有它就不可能避免差距,如果有人想让我大吃一惊并向我展示,而不使用我知道可以做到的一堆 jQuery。
然而,洗牌,我确实写了一篇文章,然后将其打包备份,实际上大部分时间都做得非常好......在我标准化我的规格之前仍然存在一些差距。
var $grid = $('.grid');
var $gridItems = $grid.children('.grid-item');
$gridItems.sort(function(a, b) {
var tmp = parseInt(Math.random() * 10);
var isOddOrEven = tmp % 2;
var isPosOrNeg = tmp > 5 ? 1 : -1;
return (isOddOrEven & isPosOrNeg);
}).appendTo($grid);
shuffle($gridItems).appendTo($grid);
$('.grid').packery();
function shuffle(array) {
var currentIndex = array.length,
temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
所以我有一个 Packery 网格,希望随机排列项目,以便它们至少可以完美地组织到容器的高度...如果宽度关闭,那很好。
查看这样的布局:
<div class="grid">
<div class="grid-item grid-sizer"><img src="http://placehold.it/350x150" border="0" class="img-responsive" /></div>
<div class="grid-item"><img src="http://placehold.it/150x150" border="0" class="img-responsive" /></div>
<div class="grid-item grid-item--width2"><img src="http://placehold.it/700x250" border="0" class="img-responsive" /></div>
<div class="grid-item grid-item--width2"><img src="http://placehold.it/700x200" border="0" class="img-responsive" /></div>
<div class="grid-item"><img src="http://placehold.it/350x150" border="0" class="img-responsive" /></div>
<div class="grid-item"><img src="http://placehold.it/350x150" border="0" class="img-responsive" /></div>
<div class="grid-item"><img src="http://placehold.it/350x150" border="0" class="img-responsive" /></div>
<div class="grid-item grid-item--width2"><img src="http://placehold.it/700x200" border="0" class="img-responsive" /></div>
<div class="grid-item grid-item--width2"><img src="http://placehold.it/700x200" border="0" class="img-responsive" /></div>
<div class="grid-item"><img src="http://placehold.it/350x150" border="0" class="img-responsive" /></div>
<div class="grid-item"><img src="http://placehold.it/150x150" border="0" class="img-responsive" /></div>
<div class="grid-item"><img src="http://placehold.it/350x150" border="0" class="img-responsive" /></div>
<div class="grid-item"><img src="http://placehold.it/350x150" border="0" class="img-responsive" /></div>
</div>
一些通用样式:
.grid-sizer, .grid-item{
width: 20%;
float: left;
img{
width: 100%;
height: auto;
}
}
.grid-item--width2{
width: 40%;
}
最后,发起人:
var $grid = $('.grid').imagesLoaded( function() {
$grid.packery({
columnWidth: '.grid-sizer',
itemSelector: '.grid-item',
gutter: 0,
precentPosition: true
});
});
所以我决定,如果没有一些额外的 jquery(如果需要,我可以稍后再写),上传必须有规范。没有它就不可能避免差距,如果有人想让我大吃一惊并向我展示,而不使用我知道可以做到的一堆 jQuery。
然而,洗牌,我确实写了一篇文章,然后将其打包备份,实际上大部分时间都做得非常好......在我标准化我的规格之前仍然存在一些差距。
var $grid = $('.grid');
var $gridItems = $grid.children('.grid-item');
$gridItems.sort(function(a, b) {
var tmp = parseInt(Math.random() * 10);
var isOddOrEven = tmp % 2;
var isPosOrNeg = tmp > 5 ? 1 : -1;
return (isOddOrEven & isPosOrNeg);
}).appendTo($grid);
shuffle($gridItems).appendTo($grid);
$('.grid').packery();
function shuffle(array) {
var currentIndex = array.length,
temporaryValue, randomIndex;
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
// And swap it with the current element.
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}