ボックスを縦横綺麗に自動で配置したい

ボックスを縦横綺麗に自動で配置したい場合に
jquery.masonry.min.jsを使用します。


公式ページhttp://masonry.desandro.com/
参考サイトhttp://webdrawer.net/javascript/jquerymasonry.html

<script src="js/jquery.masonry.min.js" type="text/javascript"></script>

でスクリプトを読み込み

<script>

$(function(){

    var $container = $('#Cnt1');

    $container.imagesLoaded( function(){

        $container.masonry({

            itemSelector : '.pBox'

        });

    });

});

</script>

でスクリプト設定
スクリプト詳細
var $container = $(‘#Cnt1’);大枠の指定
$container.imagesLoaded( function(){});画像を先に読み込ませてから実行する設定
$container.masonry({ itemSelector : ‘.pBox’});
自動で配置するボックスの指定