1.综述
最近研究了时下流行的瀑布流展示效果。 当前共计尝试的方法及其优缺点如下：
2基于jquery+jquery.masonry.js的实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery 瀑布流 延时分页加载</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div class="item shadow radius"> <a href='/taobaoke/yifu/14.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-121205193S70-L.jpg' alt='2012秋冬新款 韩版修身纯色大圆领低领 打底衫 女' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/xiezi/33.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-121205214R90-L.jpg' alt=' 美丽说推荐马丁靴明星款擦色打蜡平跟简约短靴' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/xiezi/32.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-121205214K30-L.jpg' alt='欧美明星款超可人兔毛装饰绒面拼接性感内增高' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/20.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051942400-L.jpg' alt='2012冬装新款 韩版毛领带帽徽章保暖棉衣棉服外套' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/16.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051940200-L.jpg' alt='2012冬装新款 拼皮口袋显瘦男友风灯芯绒休闲裤' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/xiezi/34.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212052149180-L.jpg' alt='牛仔很忙~瘦版加毛水洗磨白系带牛仔高帮鞋' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/baobao/37.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212052154240-L.jpg' alt='XYS SHOP 复古新款潮流女包 呢绒波士顿包包 潮包包' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/meirong/41.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-121205215I90-L.jpg' alt='Mac家Face And Body奶瓶粉底液 120ml' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/jiaji/40.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-121205215A10-L.jpg' alt='萝莉风-棉麻 办公室抱枕靠垫 汽车靠垫 沙发靠枕' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/peishi/39.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212052156050-L.jpg' alt='彩色贝壳假面 面具 黑色水晶桃心双层毛衣链项链' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/baobao/38.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212052155240-L.jpg' alt='潮人私物优质马毛豹点短款钱包 钱夹卡包零钱包' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/baobao/36.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212052153530-L.jpg' alt='正品包邮 非水版 气质百搭流苏水桶包双肩包三用' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/xiezi/35.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212052149440-L.jpg' alt='贝嫂 韩国 OL气质绒面 高质感 粗高跟防水台 短靴' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/8.html'><img src='http://demo.iucms.com/taobaoke/uploads/121205/1-121205214614H1.jpg' alt='2012新款甜美公主蕾丝大毛毛修身加厚连帽棉衣外' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/shangpu/31.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051952230-L.png' alt='拍鞋网' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/shangpu/30.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051951590-L.png' alt='银泰网' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/shangpu/29.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051951360-L.png' alt='佑一良品' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/shangpu/28.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051951120-L.png' alt='斯波帝卡' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/shangpu/27.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051950470-L.png' alt='NALA商城' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/shangpu/26.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051950200-L.png' alt='草莓派护肤品商城' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/shangpu/25.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051949560-L.png' alt='乐淘网' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/shangpu/24.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051949350-L.png' alt='库巴购物网' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/shangpu/23.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-121205194Z20-L.png' alt='PBA美妆商城' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/shangpu/22.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-121205194S20-L.png' alt='凡客诚品' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/21.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051943280-L.jpg' alt='2012秋冬新款蝙蝠袖针织衫韩版英伦镂空套头大码' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/19.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051942050-L.jpg' alt='lolo2012新款韩版秋冬女装拼接兔绒黑白狐狸毛9分' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/18.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051941350-L.jpg' alt=' 2012秋冬新款 欧美简约宽松加厚麻花图案女套头' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/17.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051940550-L.jpg' alt='xixi 优质蝙蝠袖甜美麻花宽松毛衣' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/15.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051939430-L.jpg' alt='韩国货 超爱自留款 大牌设计款 口袋加厚 羊毛' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/13.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-121205193Q00-L.jpg' alt='小格格2012秋装 欧美百搭长袖宽松短款短外套 撞' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/12.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-121205193I40-L.jpg' alt='韩国货 女式 球球宽松毛衣 特特' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/11.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-121205193A50-L.jpg' alt='bobo家 VIVI羊羔绒大翻领双排扣加厚粗花呢毛呢西' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/10.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051936090-L.jpg' alt='秋冬款打底裙2012冬装新款女士长袖连衣裙连身裙' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/9.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051935240-L.jpg' alt='2012秋装新品 韩版加大码 长袖牛仔衬衫女水洗磨' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/7.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051934040-L.jpg' alt=' TOOK LOOK 2012定制欧美风厚实棉里衬超好品质呢外' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/6.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051932530-L.jpg' alt='【12.12】KK实拍 韩单 木耳袖子针织衫毛衣' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/5.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051931450-L.jpg' alt='韩版高品质仿羊羔毛棉大衣 中长款长袖大码圈圈' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/4.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051930450-L.jpg' alt='【囍家】外贸原单 冬季加厚个性连体怕怕睡衣' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/3.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-1212051929320-L.jpg' alt=' 初冬新款时尚韩范复古欧美千鸟格蝙蝠宽松套头' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/2.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-121205192T90-L.jpg' alt='2012秋冬新款韩版女装百搭休闲裤短裤女松紧高腰' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="item shadow radius"> <a href='/taobaoke/yifu/1.html'><img src='http://demo.iucms.com/taobaoke/uploads/allimg/121205/1-121205192I40-L.jpg' alt='韩国重磅热款 几何多色定型袖口毛衣 A字宽松七' class='thum_small'/></a>
<h2><a href="/taobaoke/yifu/1.html" class="title">第一页加载……</a></h2>
</div>
<div class="clear"></div><div id="page-nav"><a href="2.html">2</a><a href="3.html">3</a><a href="4.html">4</a><a href="5.html">5</a><a href="6.html">6</a></div>
</div>
<script language="JavaScript" type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script language="JavaScript" type="text/javascript" src="js/jquery.infinitescroll.js"></script>
<script type="text/javascript" src="js/all.js"></script>
</body>
</html>
相关推荐
总结来说，"masonry.pkgd.min.js" 和 "imagesloaded.pkgd.min.js" 为前端开发者提供了实现自适应瀑布流布局的强大工具，它们简化了复杂的布局计算，优化了图片加载流程，提升了网页的互动性和美观度。
通过这个"瀑布流demo"，你可以学习到如何将Masonry和Infinitescroll整合到一个项目中，理解它们的交互机制，并且能够应用到自己的项目中。这个示例对于想要提升网页交互性和加载性能的开发者来说，是非常有价值的...
本项目"jQuery瀑布流Demo"是基于jQuery实现的一种图片展示方案，它能够动态加载图片，即当用户滚动页面到一定位置时，新的图片会自动加载并无缝融入瀑布流布局中，这种技术被称为无限滚动或滚动加载。这种设计优化了...
1. **源代码文件**（如：JavaScript文件，通常为`masonry.js`或`masonry.min.js`）：这是Masonry库的核心代码，用于实现瀑布流布局的功能。 2. **样式表文件**（如：`masonry.css`或`styles.css`）：用于定义元素的...
在压缩包中的"瀑布流Demo"可能包含了HTML、CSS和JavaScript文件，你可以通过查看和学习这些文件了解瀑布流布局的具体实现细节。这个小例子可能包含了一些基础的计算和布局逻辑，适合初学者理解和实践瀑布流布局的...
在"精典源码之瀑布流DEMO源码.zip"这个压缩包中，我们可以找到与瀑布流布局相关的资源。首先，"瀑布流示例图片.png"应该是展示瀑布流布局效果的截图，它能帮助我们直观理解瀑布流布局的视觉表现，包括元素的大小不一...
在jQuery中实现瀑布流效果，我们需要借助一些插件或者自定义的JavaScript代码来完成。 首先，我们要了解瀑布流布局的基本原理。通常，瀑布流布局需要监听浏览器窗口的滚动事件，当用户滚动到页面底部时，通过Ajax...
jQuery Masonry是一款流行的JavaScript插件，由David DeSandro开发，它主要用于创建“瀑布流”或“方砖布局”，这种布局方式常用于图片展示，使网页上的元素能够自适应地填充到页面的每一处空白，呈现出美观且富有...
4. **JavaScript/jQuery插件**：为了实现瀑布流效果，可能使用了现有的jQuery插件，如jQuery Masonry、Isotope等。这些插件可以自动计算元素的宽度和高度，调整它们的位置，形成连续的瀑布效果。 5. **动态加载**：...
本压缩包中的"特效源码瀑布流demo"提供了实现这一效果的源代码示例。通过学习和研究这个demo，你可以了解到以下几个关键知识点： 1. **响应式设计**：瀑布流布局通常需要具备响应式能力，能够自适应不同的屏幕尺寸...
2. **JavaScript/jQuery实现**：为了实现瀑布流的动态加载和响应式效果，通常需要JavaScript或者jQuery来处理窗口大小变化和数据加载。例如，当用户滚动到底部时，会触发更多内容的加载，保持布局的连续性。 3. **...
4. **Flexbox**：虽然Flexbox主要用于单列布局，但通过一些技巧和JavaScript辅助，也可以实现瀑布流效果，特别是在现代浏览器中，这种方式的性能和兼容性都有所提升。 在"瀑布流显示图片效果(demo)"这个项目中，...
在提供的压缩包文件中，包含了三个不同的瀑布流demo，这些demo采用不同的方法实现了瀑布流效果，对于初学者来说，是非常有价值的参考资料。下面将详细介绍可能涉及的知识点： 1. **JavaScript/jQuery实现**：瀑布流...
2. **JavaScript库与插件**：为了实现瀑布流效果，开发者通常会使用JavaScript库，如jQuery Masonry或Isotope等。这些库提供了强大的API，可以轻松实现动态加载和布局调整。在"Demo-瀑布流"中，可能就用到了类似的...
总的来说，jQuery瀑布流插件是实现网页动态、自适应布局的有效工具，其核心在于巧妙地处理元素的尺寸、定位和加载，以实现美观且流畅的视觉效果。对于前端开发者来说，掌握这样的插件不仅能提升工作效率，也能为用户...
6. **JavaScript/jQuery 实现**：虽然纯CSS可以实现简单的瀑布流布局，但要处理复杂的交互和动态加载，通常需要JavaScript或jQuery。例如，通过监听滚动事件，计算元素的位置，动态调整布局，并触发分页和预加载功能...
1. **源代码文件**：JavaScript文件（如`jquery.waterfall.js`）实现了瀑布流布局的逻辑。 2. **示例或演示**：可能有一个`demo.html`文件，展示了插件的使用方法和效果。 3. **CSS样式表**：`style.css`可能包含了...
在这个"js瀑布流demo案例"中，我们将探讨JavaScript如何实现这种布局，并通过分析压缩包中的"demo"文件来深入理解其实现原理。 首先，我们需要了解瀑布流布局的基本概念。它源于Pinterest网站的设计，特点是每一列...
在这个名为“瀑布流Demo1”的项目中，我们可以预期找到一个简单的实现瀑布流布局的示例代码。通常，这样的Demo会包含HTML、CSS和JavaScript（可能使用jQuery或其他库）三个主要部分。 1. HTML结构： HTML部分主要...
瀑布流布局，也被称为Masonry布局，是一种常用于图片展示或商品列表的网页设计模式，它的特点是每一列的顶部对齐，而每行的长度不一，形成类似瀑布的效果。这种布局方式最早由Pinterest网站引入并流行起来，因为它...