ボックスを縦横綺麗に自動で配置したい
ボックスを縦横綺麗に自動で配置したい場合に
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’});
自動で配置するボックスの指定
この投稿へのトラックバック
トラックバックはありません。