すでにトップページはグリッド配置ができるjQueryプラグインを利用させていただいていますが、今回別ページで同様にグリッド配置を可能にするjQuery Masonryを設定したのでメモしておこうと思います。英語のチュートリアルは読むのに時間がかかりますね･･･。

やったこと

1. jQuery Masonryのダウンロードしてjquery.masonry.jsをサーバへアップロード
2. jquery.masonry.jsを読み込んで設定します。今回は画像を表示させるので、画像を表示しても崩れないように設定しています。各設定はjQuery MasonryページのDemoを参照するとよいと思います。

   <script type="text/javascript" src="./js/jquery.masonry.js"></script>
   <script type="text/javascript">
   $(function(){
   var $container = $('#grid-entry_content');
   $container.imagesLoaded( function(){
   $container.masonry({
   itemSelector : '.grid-wrapper-230'
   });
   });
   });
   </script>
   

3. CSSはこんなかんじで書きました。id名・class名もそうですが、細かい設定は構築する環境によって異なりますので適宜書き換えてください。

   #grid-entry_content {
   width: 730px;
   margin:10px 0 0 0;
   padding: 0;
   overflow: auto;
   }
   .grid-wrapper-230 {
   width: 205px;
   margin: 0 15px 15px 0;
   padding: 5px 8px 5px 8px;
   border: 2px solid #fff;
   background:#fff;
   display: inline;  /* IE6 fix */
   }
   

とりあえず意図したとおりに表示できるようになったのでよしとします。