Tag Archive L4

AJAXで追加コンテンツを読み込んだ時にmasonryとimagesLoadedがうまく動かない場合

こんにちは、なかしーです。
Laravelネタに関連して、masonryで躓いた時の対応についてです。
ピンタレスト風にコンテンツをぬるぬる読み込みたい時もあると思います。ありますよ。あります。
そこでmasonryなぞを使ってみたものの、あんまりAJAXとかJSが得意でない為に、ちゃんと動かず困りました。
それで、こちらへんを参考にしてやっとこさ動きました。JSなんてどうせ見えちゃうからさらしちゃおう。
 
サンプル：

<script type="text/javascript">
var page = 1;
$(document).ready(function() {
    $container = $("#item_list");
    $container.imagesLoaded(function() {
      $container.masonry({
        itemSelector: '.thumb',
        columnWidth: '.thumb',
      });
    });
        $(window).scroll(function(){
                if  ($(window).scrollTop() + 100 >= $(document).height() - $(window).height()){
			var obj = $(this);
		        if (!obj.data("loading")) {
		            obj.data("loading", true);
		            $("#prefooter").append("<p>Loading...</p>");
		            setTimeout(function(){
		            $.ajax({
		               type: 'GET',
		               url: "http://hogehoge/?order=desc&page=" + (++page),
		               dataType: 'html',
		               success: function(data) {
				if (data != ''){
				  $container.imagesLoaded(function(){
　					var el = $(data);
					el.css('display','none');
					$container.append(el);
					$container.imagesLoaded(function(){
					  el.css('display','inline');
					  $container.masonry('appended', el, true);
					});
				  });
				}
		               },
		               error:function() {
		                   alert('問題がありました。');
		               }
		            });
				setTimeout(function(){
					 obj.data("loading", false);
				}, 1000);
			 	$("#prefooter p:last").remove();
		            }, 500);
		        }
                }
        });
    // リロードしたときにページの先頭を表示する
    $('html,body').animate({ scrollTop: 0 }, '1');
});
</script>

 
 
誰かのお役に立てば何よりです。
 
 
では。