パッカーjsシャッフルとコンテナへのフィット

Question

パッカーグリッドを持っているので、少なくともコンテナの高さまで完全に整理できるようにアイテムをシャッフルします。幅がオフの場合は問題ありません。

<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せずに、アップロードの仕様であることを持っているが起こっていることを決めました。誰かが私の心を吹き飛ばして見せたいと思っていたら、それがなくてもgappageを避けることは不可能です。

しかし、シャッフル、私は作品を書き上げて、それをバックアップして、実際にはほとんどの時間かなりかわいいことを終了...まだ私は私の仕様を標準化するまでいくつかのギャップを取得します。うまく

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; 
}