Go to list of users who liked
Share on X(Twitter)
Share on Facebook
More than 5 years have passed since last update.
pinterestのような、
・要素を隙間なく敷き詰める
・ブラウザのリサイズに応じて配置も変わる
といった機能を持つタイルビューを実現するjsのライブラリはいくつかあります
その中でも今回は定番のmasonryを使い、
ajaxでページングして下に下にコンテンツをページ遷移なしで追加してみます
基本的なmasonryの使い方は他に記事が大量にあるのでここでは解説しませんよ!
完成イメージは(手前味噌ですが)こんなかんじです↓
tokyotownname.com
では始めます、
画像がいくつかトップにあり、
その下に「もっと読む」ボタンがあるとします。ありがちですね。
<!-- タイルビュー --><divid="images"><divid="image-unit">....</div><divid="image-unit">....</div> ......<divid="image-unit">....</div><divid="image-unit">....</div></div><!-- もっと読むボタン --><ahref="#"id="read-more">もっと読む</a>window.onload=function(){$("#images").masonry({itemSelector:'#image-unit',});}2ページ目の画像たちを表示させるhtmlをajax経由で取ってきましょう
取ってきたhtmlはコンテナである$("images")にappendします
現在のページ数はwindow.pagingに保存しておくとします
$('#read-more').click(function(){$.ajax({url:"photos/",type:"GET",data:{page:window.paging},dataType:"html",beforeSend:function(){$('#read-more').text("読み込み中...");},success:function(data){if(data!=''){$container=$("#images");$container.imagesLoaded(function(){varel=$(data);el.css('display','none');$container.append(el);$container.imagesLoaded(function(){el.css('display','inline');$container.masonry('appended',el,true);$('#read-more').text("もっと読む");});});}else{$('#read-more').text("もう画像はありません");}},error:function(data){console.log("some error occured! majioco! punpunmaru!");}});})コールバックのsuccessに次ページのhtmlが返ってきます。
これを jQueryオブジェクトにした後にコンテナのimagesにappendして、
masonryのappendedメソッドを呼んで整列させればいいのですが、
正しくmasonryが画像の位置を決めるためには
画像がすべて読み込まれてからじゃないといけない点に注意しましょう
でないと縦横のサイズが分からないのでmasonryさんが位置を計算できないのです
なので、imagesLoaded.jsを使って
コンテナに追加した次ページのhtml内の画像がすべて読み込まれるのを待ってから、
masonryのappendedで整列処理を行います
$container=$("#images");$container.imagesLoaded(function(){varel=$(data);el.css('display','none');$container.append(el);$container.imagesLoaded(function(){el.css('display','inline');$container.masonry('appended',el,true);$('#read-more').text("もっと読む");});});また、コンテナに次ページのhtmlを追加して整列が完了するまでの間、
画像が未読み込みがhtmlがチラッと見えてしまい非常に見苦しい事になるので、
追加してすぐにdisplay:noneして隠してしまいましょう
以上です。コンテンツを楽しく見せる事ができるMasonryをぜひとも検討してみてください!
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme