jQuery实现瀑布流效果

何为瀑布流：

　　瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。

瀑布流的应用：

　　瀑布流对于图片的展现，是高效而具有吸引力的，用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免了用户鼠标点击的翻页操作，瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式，巧妙的利用视觉层级，视线的任意流动又缓解了视觉疲劳，同时给人以不拘一格的感觉，切中年轻一族的个性化心理。[1] 国内类Pinterest网站也如雨后春笋般出现，已知网站超40家，类Pinterest网站有四种，一是电商导购，如想去网、蘑菇街和美丽说、好享说、依托于淘宝平台;二是兴趣图谱分享，如知美、花瓣等;三是在细分垂直领域，如针对吃货的零食控、针对家居行业的他部落等。四是服装款式设计资讯平台如看潮网等等。
优

应用案例：

通用类：豆瓣市集，花瓣网，我喜欢，读图知天下
美女图片：图丽网
时尚资讯类：看潮网
时尚购物类：蘑菇街，美丽说，人人逛街，卡当网
品牌推广类：凡客达人
家居o2o类：新巢网小猫家
微博社交类： 都爱看
搞笑图片类：道趣儿
艺术收藏类：微艺术
潮流图文分享：荷都分享网

实现效果：

实现代码：

HTML:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title>瀑布流</title>
  5. 	<meta charset="utf-8">
  6. 	<script type="text/javascript" src="../jquery/jquery-3.1.1.min.js"></script>
  7. 	<link rel="stylesheet" type="text/css" href="waterFall.css">
  8. </head>
  9. <body>
  10. <div id="main">
  11. <div class="pin">
  12. 	<div class="box">
  13. 		<img src="#" alt="img1" style="background-color: #03c03c;" width="200" height="300">
  14. 	</div>
  15. </div>
  16.  
  17. <div class="pin">
  18. 	<div class="box">
  19. 		<img src="#" alt="img2" style="background-color: #03c03c;" width="200" height="400">
  20. 	</div>
  21. </div>
  22.  
  23. <div class="pin">
  24. 	<div class="box">
  25. 		<img src="#" alt="img3" style="background-color: #03c03c;" width="200" height="350">
  26. 	</div>
  27. </div>
  28.  
  29. <div class="pin">
  30. 	<div class="box">
  31. 		<img src="#" alt="img4" style="background-color: #03c03c;" width="200" height="200">
  32. 	</div>
  33. </div>
  34.  
  35. <div class="pin">
  36. 	<div class="box">
  37. 		<img src="#" alt="img5" style="background-color: #03c03c;" width="200" height="400">
  38. 	</div>
  39. </div>
  40.  
  41. <div class="pin">
  42. 	<div class="box">
  43. 		<img src="#" alt="img6" style="background-color: #03c03c;" width="200" height="100">
  44. 	</div>
  45. </div>
  46.  
  47. <div class="pin">
  48. 	<div class="box">
  49. 		<img src="#" alt="img7" style="background-color: #03c03c;" width="200" height="330">
  50. 	</div>
  51. </div>
  52.  
  53. <div class="pin">
  54. 	<div class="box">
  55. 		<img src="#" alt="img8" style="background-color: #03c03c;" width="200" height="200">
  56. 	</div>
  57. </div>
  58.  
  59. <div class="pin">
  60. 	<div class="box">
  61. 		<img src="#" alt="img9" style="background-color: #03c03c;" width="200" height="450">
  62. 	</div>
  63. </div>
  64.  
  65. <div class="pin">
  66. 	<div class="box">
  67. 		<img src="#" alt="img10" style="background-color: #03c03c;" width="200" height="500">
  68. 	</div>
  69. </div>
  70.  
  71. <div class="pin">
  72. 	<div class="box">
  73. 		<img src="#" alt="img11" style="background-color: #03c03c;" width="200" height="200">
  74. 	</div>
  75. </div>
  76.  
  77. <div class="pin">
  78. 	<div class="box">
  79. 		<img src="#" alt="img12" style="background-color: #03c03c;" width="200" height="100">
  80. 	</div>
  81. </div>
  82.  
  83. <div class="pin">
  84. 	<div class="box">
  85. 		<img src="#" alt="img13" style="background-color: #03c03c;" width="200" height="300">
  86. 	</div>
  87. </div>
  88. </div>
  89. <script type="text/javascript" src="waterFall.js"></script>
  90. </body>
  91. </html>

CSS:

  1. *{
  2. 	margin: 0;
  3. 	padding: 0;
  4. }
  5.  
  6. #main{
  7. 	position: relative;
  8. }
  9.  
  10. .pin{
  11. 	padding: 15px 0 0 15px;
  12. 	float: left;
  13. }
  14.  
  15. .box{
  16. 	padding: 5px;
  17. 	border-color: 1px solid #ccc;
  18. 	box-shadow: 0 0 6px #ccc;
  19. 	border-radius: 5px;
  20. }

jQuery:

  1. $(document).ready(function(){
  2. 	$(window).on("load", function(){
  3. 		imgLocation();
  4. 		var dataImg = {"data":[{"src":"alt1.jpg"},{"src":"alt2.jpg"}]};
  5. 		// 获取最后一张图片距离顶端的高度 + 它本身高度的一半
  6. 		$(window).scroll(function() {
  7. 			if(getSideHeight()){
  8. 				$.each(dataImg.data, function(index, value){
  9. 					var pin = $("<div>").addClass('pin').appendTo('#main');
  10. 					var box = $("<div>").addClass('box').appendTo(pin);
  11. 					var img = $("<img>").attr('src', 'images/' + $(value).attr("src")).appendTo(box);
  12. 				});
  13. 				imgLocation();
  14. 			}
  15. 		});
  16.  
  17. 	});
  18. });
  19.  
  20. //获取最后一张图片的高度
  21. function getSideHeight(){
  22. 	var box = $("pin");
  23. 	var lastImgHeight = (box.last().get(0)).offsetTop - Math.floor(box.last().height()/2);
  24. 	var documentHeight = $(document).height(); 			//获取当前窗口的高度
  25. 	var scrollHeight = $(window).scrollTop(); 			//获取滚动的距离
  26. 	return (lastImgHeight < documentHeight + scrollHeight) ? true:false;
  27. }
  28.  
  29. //图片位置摆放
  30. function imgLocation(){
  31. 	var box = $(".pin"); 								//返回一个数值
  32. 	var boxWidth  = box.eq(0).width(); 					//每张图片的宽度
  33. 	var num = Math.floor($(window).width()/boxWidth); 	//一行能放的图片的个数
  34. 	var numArr = [];
  35. 	box.each(function(index, value){
  36. 		var boxHeight = box.eq(index).height(); 		//获取每张图片的高度
  37. 		if(index < num){ 								//第一排
  38. 			numArr[index] = boxHeight;
  39. 		}
  40. 		else{											//第二排
  41. 			var minboxHeight = Math.min.apply(numArr,numArr);
  42. 			var minIndex = $.inArray(minboxHeight, numArr);
  43. 			$(value).css({
  44. 				position: "absolute",
  45. 				top: minboxHeight,
  46. 				left: box.eq(minIndex).position().left
  47. 			});
  48. 			numArr[minIndex] += box.eq(index).height(); //新高度
  49. 		}
  50. 	});
  51. }

　　

【前端】用jQuery实现瀑布流效果的更多相关文章

  1. 用jQuery实现瀑布流效果学习笔记

    jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...

  2. jquery实现瀑布流效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. jQuery淡入淡出瀑布流效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jQuery实现瀑布流

    瀑布流布局多用于加载图片,或者图片配上文字.视觉表现为参差不齐的多栏布局.随着页面滚动条向下滚动,还会不断加载数据块并附加至当前尾部.本文就来利用jQuery实现一个图片瀑布流的效果. 1.布局. 首 ...

  5. WPF下制作的简单瀑布流效果

    最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面 我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单. 1.最重要的 ...

  6. Jquery简单瀑布流代码示例

    最近很多网站都采用瀑布流风格设计,感觉挺有个性的,比较合适做图片类型的网站,没事仿开心网做一个瀑布流示例. 需要用到Jquery,jquery.masonry.min.js <!DOCTYPE ...

  7. jquery版瀑布流

    一个月前用jquery实现了瀑布流效果,看着当时的代码有点难过……今天抽时间稍微修改了一下.额,现在看起来不是那么难受了,就来和大家分享一下.废话不多说,开始正题~ 一.演示效果 二.html代码 & ...

  8. RecylerView完美实现瀑布流效果

    RecylerView包含三种布局管理器,分别是LinearLayoutManager,GridLayoutManager,StaggeredGridLayoutManager,对应实现单行列表,多行 ...

  9. 使用JS实现图片展示瀑布流效果

    不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度 ...

随机推荐

  1. 在容器中利用Nginx-proxy实现多域名的自动反向代理、免费SSL证书

    在个人的小项目或者测试环境中,配置反向代理显得十分繁琐,而借助 Nginx-proxy 的镜像,即使是小白,也能快速实现域名转发. 1.域名.IP自动转发 在开始之前,首先黑进了自家的路由器,将某个域 ...

  2. 关于QT中的音频通信问题

    今天给大家讲说一个新的东西,使用QT实现音频通信的功能,挺起来是不是很高大上啊,哈哈,实际上我们只是使用一些接口做一些简单的工作而已,并不是让你写一个传输协议和采集音频信息,好了,那我们就来说一说关于 ...

  3. PHP科普

    1.PHP是什么意思? 超文本预处理器(Hypertext Preprocessor) 2.PHP是干什么用的? PHP是一种通用开源脚本语言.语法吸收了C语言.Java和Perl(实际抽取与汇报语言 ...

  4. selenium+python定位元素方法

    定位元素方法 官网地址:http://selenium-python.readthedocs.org/locating-elements.html        这里有各种策略用于定位网页中的元素(l ...

  5. Android界面(1) 使用TextView实现跑马灯效果

    方法一:(只能实现单个TextView的跑马灯效果)在TextView添加以下控件 android:singleLine="true"只能单行,超出的文字显示为"...& ...

  6. [BZOJ3675]序列分割

    3675: [Apio2014]序列分割 Time Limit: 40 Sec  Memory Limit: 128 MB Description 小H最近迷上了一个分隔序列的游戏.在这个游戏里,小H ...

  7. WPF MVVM 架构 Step By Step(3)（把后台代码移到一个类中）

    我觉得大部分开发者应该已经知道怎么去解决这个问题.一般都是把后台代码(GLUE code)移动到一个类库.这个类库用来代表UI的属性和行为.任何代码当被移到一个类库中时都可以被编译成一个DLL,然后可 ...

  8. Mac远程连接windows报错“证书或相关链无效，是否仍要连接到此计算机”的处理办法。

    这个主要是因为策略组设置的问题.详细的设置方法如下: 本地计算机策略>计算机配置>管理模板>windows组件>远程桌面服务>远程桌面会话主机>安全>远程(R ...

  9. jQuery时间日期插件laydate，兼容bootstrap

    解压后,将laydate整个文件放至您项目的任意目录,不要移动其文件结构,它们具有完整的依赖体系. 使用只需在页面引入laydate.js即可. 如果您的网站的js采用合并或模块加载,您需要打开lay ...

  10. linux系统最常用命令（持续更新）

    1.重启服务器 ubuntu系统重启apache:/etc/init.d/apache2 restart linux重启nginx: service nginx restart 重新加载:servic ...