Пакет js shuffle и подходит к контейнеру

Question

Итак, у меня есть сетка 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/

Answer 1

Так что я решил, что без какой-либо дополнительной 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; 
}