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;
});
分享到:
相关推荐
瀑布式网页则按需加载,初期只加载可视区域的内容,降低了初次加载时间,对用户网络条件友好。 3. **SEO挑战**:瀑布式网页对搜索引擎优化(SEO)带来一定挑战,因为搜索引擎爬虫可能无法像用户一样无限滚动抓取...
懒加载(Lazy Loading)是一种优化网页性能的技术,它延迟加载非可视区域的资源,直到用户滚动到这些资源所在的位置。在瀑布流中,懒加载尤其重要,因为它避免了一次性加载大量图片导致的页面加载速度慢的问题。只有...
在这个项目中,"jquery响应式网站瀑布流布局带图片延迟无限滚动加载效果"主要涉及以下几个关键知识点: 1. **jQuery**:jQuery简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。在瀑布流布局中,jQuery...
图片延迟加载通过只加载可视区域内的图片,当用户滚动页面时,即将进入可视区域的图片才会被加载,从而减少首屏加载时间和数据消耗。jQuery库提供了一些插件,如`jquery.lazyload.js`,可以帮助开发者轻松实现这一...
8. **前端优化**:为了提高用户体验,需要考虑延迟加载(lazy loading)技术,即只加载当前可视区域内的图片,当用户滚动时,再加载即将进入视口的图片。这可以显著减少初次加载时的网络负担。 9. **响应式设计**:...
7. **响应式设计**:为了适应不同设备和屏幕尺寸,瀑布流加载模式需要具备响应式设计。可以使用媒体查询或者jQuery的`.resize()`方法来动态调整列数和内容项的大小。 通过以上步骤,我们可以用jQuery实现一个功能...
在瀑布流布局中,我们通常不会一次性加载所有图片,而是采用懒加载(Lazy Loading)技术,即只加载可视区域内的图片,当用户滚动页面时,新进入可视区的图片再进行加载。这样可以显著减少首屏加载时间,提高用户体验...
1. **延迟加载**:为了提高页面性能,可以使用懒加载策略,只有当元素进入可视区域时才加载其图片或其他资源。 2. **适应性设计**:确保布局在不同屏幕尺寸和设备上都能正常工作,这可能需要使用媒体查询或响应式...
2. **图片懒加载**:延迟加载非可视区域内的图片,减少首屏加载时间,提升页面加载速度。 3. **计算布局**:通过JavaScript动态计算元素的宽度和位置,实现自适应的瀑布流布局。 4. **AJAX请求**:向服务器请求新的...
7. **延迟加载**:为减少首次加载时的数据量和提高加载速度,可以采用懒加载策略,即在用户滚动到可视区域附近时才加载对应的数据。 8. **图片加载库**:为了高效地加载和显示图片,通常会引入图片加载库,如Glide...
7. **延迟加载**(ListLazyLoad):考虑到用户体验,我们可以采用延迟加载技术,即图片或数据只有在进入视口时才开始加载。这样可以减少初始页面加载时间,提升页面性能。 综上所述,实现模仿新浪微博的下拉加载更...
3. **延迟加载**:对于大量图片的瀑布流,可以使用懒加载(lazy loading)技术,只加载可视区域内的图片,提高页面加载速度。 总之,CSS+DIV瀑布流布局是Web前端开发中的一个重要技巧,通过巧妙地结合CSS和...
7. **图片优化**:对于大量图片的加载,可能还需要考虑图片的压缩、延迟加载(lazy loading)等优化策略,以减少页面加载时间和提高用户体验。 这个项目提供了学习和实践前端开发,特别是jQuery和动态加载效果的好...
4. **延迟加载**:为了提高页面加载速度,Wookmark支持懒加载,即只有当用户滚动到可视区域时,才会加载更多的内容。 5. **简单易用**:Wookmark-jQuery的API设计简洁,开发者可以快速上手,进行个性化设置和扩展。 ...
3. **处理图片加载**:由于图片加载可能会有延迟,为了避免布局在图片完全加载前就已经完成,可以使用`imagesLoaded`插件(Masonry通常会与之配合使用)来确保所有图片加载完毕后再执行布局。 示例代码如下: ```...
总结来说,通过JavaScript实现移动端的响应式瀑布流插件,需要结合媒体查询、事件监听、布局计算、延迟加载、动画效果以及兼容性处理等多种技术,以提供流畅、适应性强的用户体验。开发者可以选择现有的库作为基础,...
1. 延迟加载(Lazy Loading):为了提高页面加载速度,可以对远离视口的内容进行延迟加载,只有当用户滚动到相关内容区域时才开始加载。 2. 预加载:预测用户可能滚动到的下一批内容,并提前加载,减少等待时间,...
此外,考虑到性能,通常会在用户滚动页面时,采用懒加载技术(Lazy Loading)来只加载可视区域内的元素,避免一次性加载所有内容导致页面加载速度慢。 在提供的压缩包文件`jquery-pbl`中,可能包含了实现这个功能的...
4. **延迟加载**:为了提高页面加载速度,通常只加载用户可视区域内的内容,当接近底部时,再加载更多的数据。这可以通过计算滚动位置和元素距离顶部的距离(`$(element).offset().top`)来实现。 5. **Ajax请求**...
7. **延迟加载和预加载**:为优化性能,可以实现图片的延迟加载,即只在单元格进入可视区域时才加载对应的图片。同时,预加载技术可以在当前可视范围之外预先加载一部分图片,减少滚动时的空白区域。 8. **动画效果...