【前端】用jQuery实现瀑布流效果

jQuery实现瀑布流效果

何为瀑布流：

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

瀑布流的应用：

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

应用案例：

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

实现效果：

实现代码：

HTML:

<!DOCTYPE html>

<html>

<head>

	<title>瀑布流</title>

	<meta charset="utf-8">

	<script type="text/javascript" src="../jquery/jquery-3.1.1.min.js"></script>

	<link rel="stylesheet" type="text/css" href="waterFall.css">

</head>

<body>

<div id="main">

<div class="pin">

	<div class="box">

		<img src="#" alt="img1" style="background-color: #03c03c;" width="200" height="300">

	</div>

</div>

<div class="pin">

	<div class="box">

		<img src="#" alt="img2" style="background-color: #03c03c;" width="200" height="400">

	</div>

</div>

<div class="pin">

	<div class="box">

		<img src="#" alt="img3" style="background-color: #03c03c;" width="200" height="350">

	</div>

</div>

<div class="pin">

	<div class="box">

		<img src="#" alt="img4" style="background-color: #03c03c;" width="200" height="200">

	</div>

</div>

<div class="pin">

	<div class="box">

		<img src="#" alt="img5" style="background-color: #03c03c;" width="200" height="400">

	</div>

</div>

<div class="pin">

	<div class="box">

		<img src="#" alt="img6" style="background-color: #03c03c;" width="200" height="100">

	</div>

</div>

<div class="pin">

	<div class="box">

		<img src="#" alt="img7" style="background-color: #03c03c;" width="200" height="330">

	</div>

</div>

<div class="pin">

	<div class="box">

		<img src="#" alt="img8" style="background-color: #03c03c;" width="200" height="200">

	</div>

</div>

<div class="pin">

	<div class="box">

		<img src="#" alt="img9" style="background-color: #03c03c;" width="200" height="450">

	</div>

</div>

<div class="pin">

	<div class="box">

		<img src="#" alt="img10" style="background-color: #03c03c;" width="200" height="500">

	</div>

</div>

<div class="pin">

	<div class="box">

		<img src="#" alt="img11" style="background-color: #03c03c;" width="200" height="200">

	</div>

</div>

<div class="pin">

	<div class="box">

		<img src="#" alt="img12" style="background-color: #03c03c;" width="200" height="100">

	</div>

</div>

<div class="pin">

	<div class="box">

		<img src="#" alt="img13" style="background-color: #03c03c;" width="200" height="300">

	</div>

</div>

</div>

<script type="text/javascript" src="waterFall.js"></script>

</body>

</html>

CSS:

*{

	margin: 0;

	padding: 0;

}

#main{

	position: relative;

}

.pin{

	padding: 15px 0 0 15px;

	float: left;

}

.box{

	padding: 5px;

	border-color: 1px solid #ccc;

	box-shadow: 0 0 6px #ccc;

	border-radius: 5px;

}

jQuery:

$(document).ready(function(){

	$(window).on("load", function(){

		imgLocation();

		var dataImg = {"data":[{"src":"alt1.jpg"},{"src":"alt2.jpg"}]};

		// 获取最后一张图片距离顶端的高度 + 它本身高度的一半

		$(window).scroll(function() {

			if(getSideHeight()){

				$.each(dataImg.data, function(index, value){

					var pin = $("<div>").addClass('pin').appendTo('#main');

					var box = $("<div>").addClass('box').appendTo(pin);

					var img = $("<img>").attr('src', 'images/' + $(value).attr("src")).appendTo(box);

				});

				imgLocation();

			}

		});

	});

});

//获取最后一张图片的高度

function getSideHeight(){

	var box = $("pin");

	var lastImgHeight = (box.last().get(0)).offsetTop - Math.floor(box.last().height()/2);

	var documentHeight = $(document).height(); 			//获取当前窗口的高度

	var scrollHeight = $(window).scrollTop(); 			//获取滚动的距离

	return (lastImgHeight < documentHeight + scrollHeight) ? true:false;

}

//图片位置摆放

function imgLocation(){

	var box = $(".pin"); 								//返回一个数值

	var boxWidth  = box.eq(0).width(); 					//每张图片的宽度

	var num = Math.floor($(window).width()/boxWidth); 	//一行能放的图片的个数

	var numArr = [];

	box.each(function(index, value){

		var boxHeight = box.eq(index).height(); 		//获取每张图片的高度

		if(index < num){ 								//第一排

			numArr[index] = boxHeight;

		}

		else{											//第二排

			var minboxHeight = Math.min.apply(numArr,numArr);

			var minIndex = $.inArray(minboxHeight, numArr);

			$(value).css({

				position: "absolute",

				top: minboxHeight,

				left: box.eq(minIndex).position().left

			});

			numArr[minIndex] += box.eq(index).height(); //新高度

		}

	});

}

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

用jQuery实现瀑布流效果学习笔记
jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...
jquery实现瀑布流效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
jQuery淡入淡出瀑布流效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jQuery实现瀑布流
瀑布流布局多用于加载图片,或者图片配上文字.视觉表现为参差不齐的多栏布局.随着页面滚动条向下滚动,还会不断加载数据块并附加至当前尾部.本文就来利用jQuery实现一个图片瀑布流的效果. 1.布局. 首 ...
WPF下制作的简单瀑布流效果
最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单. 1.最重要的 ...
Jquery简单瀑布流代码示例
最近很多网站都采用瀑布流风格设计,感觉挺有个性的,比较合适做图片类型的网站,没事仿开心网做一个瀑布流示例. 需要用到Jquery,jquery.masonry.min.js <!DOCTYPE ...
jquery版瀑布流
一个月前用jquery实现了瀑布流效果,看着当时的代码有点难过……今天抽时间稍微修改了一下.额,现在看起来不是那么难受了,就来和大家分享一下.废话不多说,开始正题~ 一.演示效果二.html代码 & ...
RecylerView完美实现瀑布流效果
RecylerView包含三种布局管理器,分别是LinearLayoutManager,GridLayoutManager,StaggeredGridLayoutManager,对应实现单行列表,多行 ...
使用JS实现图片展示瀑布流效果
不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度 ...

随机推荐

Python进阶 - 对象，名字以及绑定
Python进阶 - 对象,名字以及绑定 1.一切皆对象 Python哲学: Python中一切皆对象 1.1 数据模型-对象,值以及类型对象是Python对数据的抽象.Python程序中所有的数据 ...
C#控制台或应用程序中两个多个Main()方法的可行性方案
大多数初级程序员或学生都认为在C#控制台或应用程序中只能有一个Main()方法.但是事实上是可以有多个Main()方法的. 在C#控制台或应用程序中,在多个类中,且每个类里最多只能存在一个Main() ...
Images as x-axis labels
Open-source software is awesome. If I found that a piece of closed-source software was missing a fea ...
Mysql数据库二进制安装
MySQL数据库有四种安装方法: 源码包编译安装 RPM包安装二进制文件安装官方yum源安装这里我们主要介绍二进制包的安装方法在MySQL官网下载二进制包并且上传到服务器上解压二进制包 [r ...
[HDU1020] Encoding - 加密
Problem Description Given a string containing only 'A' - 'Z', we could encode it using the following ...
JavaSE教程-02Java基本语法-BUG：易错点
1.区别文档注释和多行注释多行注释:多一个* 多行注释格式: /* 注释文字 */ 文档注释格式:/** 注释文字 */ 2.有关变量名.类名.方法名等注意点由字母.数字.下划线.$组成,但不 ...
JAVA设计模式初探之装饰者模式
定义:动态给一个对象添加一些额外的职责,就象在墙上刷油漆.使用Decorator模式相比用生成子类方式达到功能的扩充显得更为灵活.设计初衷:通常可以使用继承来实现功能的拓展,如果这些需要拓展的功能的种 ...
借用mysql 或者其他数据库处理MSSQL 2016前处理导入特殊字符
MSSQL 2016支持了utf8编码的文件,之前处理比较麻烦的bcp 方式导入特殊字符一下子就方便了. 但是之前的版本,处理起来还是有一点麻烦.这次处理使用的数据库版本是sql server 201 ...
学习maven的各种问题
1. The container 'Maven Dependencies' references non existing library 解决方法,将eclipse中maven插件中“resolve ...
如何将HLS延时缩短至4秒，HLS+技术详解
在直播应用中,RTMP 和 HLS 是两种较为成熟且广泛应用的流媒体协议,基本上可以覆盖所有客户端.RTMP 是互联网 TCP/IP 五层体系结构中应用层的协议,主要优势就是实时性高,基本可将直播延时 ...

【前端】用jQuery实现瀑布流效果

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

随机推荐

热门专题