Packery js shuffle并适合容器

时间:2016-12-20 06:04:14

标签: jquery html5 css3 packery

所以我有一个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
});

});

https://jsfiddle.net/yfp841un/

1 个答案:

答案 0 :(得分:0)

所以我决定如果没有其他一些我可以在以后写的额外的jquery,那么就必须有关于上传的规范。没有它就不可能避免使用gappage,如果有人想要吹嘘我的想法并告诉我,而不使用一堆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;
}