jQueryのプラグインjQuery Masonryを
利用してAmazon画像を敷き詰めるということを行いたいと思います。
利用するAmazonの画像はRSSランキングから取得を行います。以前の記事で取得について書いたのでそちらを参照してください。
jQuery Masonryの使いかたは指定の要素に対して以下の記述をするだけです。
$('#contents').masonry({ //囲う要素
itemSelector : '.box' //囲われている複数の要素
});
各要素はCSSでfloat指定を行うと綺麗に横並びになります。
結果)
だいたいこんな感じになります。
『レスポンシブWeb制作で話題のjQuery Masonryを試してみた』http://www.aoharu-b.com/cgi/sk/2012/10/webjquery-masonry.html