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;
});
分享到:
相关推荐
纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!
响应式jquery瀑布流结合图片延迟加载特效
延时加载图片的响应式瀑布流 PC端和移动端均适用
jQuery css3响应式瀑布流图片无限加载代码
利用php+mysql+jquery实现了瀑布流布局,实现了大小不一的图片按照一定的规律方式排列。 另外实现了图片延迟加载的功能,点击浏览器下拉滚动条时才加载更多的内容。
QT瀑布流与无限加载,是QWidget Application方案,非QML方案。
原生JS瀑布流布局,无限加载
jquery响应式网站瀑布流布局带图片延迟无限滚动加载效果
jquery自适应屏幕瀑布流图片无限加载效果
js简单瀑布流图片无限加载带鼠标悬停图片遮罩效果
jQuery瀑布流图片预加载展示代码是一款基于modernizr.js制作瀑布流图片预加载动画特效。
瀑布流这是一款非延迟加载图片效果的瀑布流!
jQuery使用json制作手机移动端瀑布流图片布局无限加载,手机导航菜单、列表图片无限加载代码。由于chrome模拟器是不允许读取本地文件json的,所以如果你要进行测试,在hbuilder打开项目就可以看到效果啦,或者是火狐...
瀑布流 图片预加载 实例
利用 jQuery瀑布流布局,点击加载更多效果 同时还用layui实现了一些别的样式
瀑布式网页
WaterfallCollectionView, 瀑布式布局的瀑布式实现 WaterfallCollectionViewWaterfallCollectionView是基于Pinterest风格的UICollectionView定制布局。 它支持( 不粘或者不粘) 头部补充视图和装饰视图。。现在它处于...
jquery 图片延迟加载 瀑布雨 类似新浪微博的效果 非常简单好用
jquery网页响应式瀑布流布局_自适应全屏瀑布流页面无限加载图