瀑布式 区域 延迟加载 博客分类： jquery

jquery.masonry.min.js
 <div class="waterfall-case " style="width:980px;margin-top:25px;display:none;">
<div class="item ">
<div class="caseItem">
<div class="title">
<img src="../static/images/tmp/h1.jpg" alt=""/>
<p>郭某谋</p>
</div>
<div class="style">
 <ul>
 <li><div class="left">户型：</div><div class="right"></div></li>
 <li><div class="left">面积：</div><div class="right"></div></li>
 <li><div class="left">风格：</div><div class="right"></div></li>
 <li><div class="left">色系：</div><div class="right"></div></li>
 </ul>
</div>
<div class="desc">
本批住宅退房中，以大户型高总价居多，120平方米以上房源共16套，占总住宅退房量的75%，其中200平方米以上的房源有7套，有6套来自同一品牌开发商，这6套房源以花园洋房和别墅为主。此次退房房源中，90平方米以下的户型仅有4套，包含永宁星座的2套56.83平方米的小公寓。
</div>

<div class="keyword">
<div class="left">关键字：</div><div class="right"></div>

</div>
<div class="clear"></div>
</div>
</div>

<div class="item"><img class="lazy" src1="http://img.decoi68.com/img/content/2014/05/29/20140529223900032_470x470.jpg" src="" alt="" /><div class="picTitle">会客室</div></div>

<div class="item"><img class="lazy" src1="http://img.decoi68.com/img/content/2014/05/29/20140529223900022_470x470.jpg" src="" alt=""/><div class="picTitle">会客室</div></div>

<div class="item"><img class="lazy" src1="http://img.decoi68.com/img/content/2014/05/29/20140529223900019_470x470.jpg" src="" alt=""/><div class="picTitle">会客室</div></div>

<div class="item"><img class="lazy" src1="../static/images/tmp/h4.jpg" src="" alt=""/><div class="picTitle">会客室</div></div>

<div class="item"><img class="lazy" src1="../static/images/tmp/h5.jpg" src="" alt=""/><div class="picTitle">会客室</div></div>

<div class="item"><img class="lazy" src1="../static/images/tmp/h3.jpg" src="" alt=""/><div class="picTitle">会客室</div></div>

<div class="item"><img class="lazy" src1="../static/images/tmp/h2.jpg" src="" alt=""/><div class="picTitle">会客室</div></div>



</div> 
</div>

--------------------------

var $container2 = $('.waterfall-case').eq(0);  
	    $container2.find("img").each(function(){
	  	  
	    	$(this).attr("src",$(this).attr("src1"));
	    	});

         $container2.imagesLoaded(function(){
           $container2.masonry({
             itemSelector : '.item',
             columnWidth : 326
           });
         });
         $container2.show(); 

-------------------------------------------

 
var initTop = 0;
$(window).scroll(function() {
		 var scrollTop = $(document).scrollTop();
		 if(scrollTop > initTop){
			  if($(window).scrollTop() > $(document).height()-1100){
					fallPos= fallPos+1;
					  var $container = $('.waterfall-case,.waterfall-bowen').eq(fallPos);   
					  $container.find("img").each(function(){
					  	  
					    	$(this).attr("src",$(this).attr("src1"));
					    	});

				         $container.imagesLoaded(function(){
				           $container.masonry({
				             itemSelector : '.item',
				             columnWidth : 326
				           });
				         });
				         $container.show(); 
		      }
		 } else {
			
			if($(".fall"+(fallPos)).length>0){
				//console.log($(".fall"+(fallPos)).offset().top+"  "+$(window).scrollTop());
			  if($(".fall"+(fallPos)).offset().top < $(window).scrollTop()+800){
				  if(fallPos>0)
				  fallPos= fallPos-1;
					  var $container = $('.waterfall-case,.waterfall-bowen').eq(fallPos);   
					  $container.find("img").each(function(){
					  	  
					    	$(this).attr("src",$(this).attr("src1"));
					    	});

				         $container.imagesLoaded(function(){
				           $container.masonry({
				             itemSelector : '.item',
				             columnWidth : 326
				           });
				         });
				         $container.show(); 
		      }
		 }
		 }
		 initTop = scrollTop;
	
			
		});