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

随机推荐

php+ajax发起流程和审核流程（以请假为例）
上一篇随笔中已经提到如何新建流程,那么现在我们就来看一下如何发起一个流程和审核流程~~~ 先说一下思路: (1)登录用session获取到用户的id (2) 用户发起一个流程注意:需要写申请事由 ( ...
日志组件二：log4j2
一.背景随着业务服务(Server App)逐渐增加,我们的业务系统中的日志输出面临的问题越来越多,高并发下对磁盘io这块消耗的越来越大,因此,急需要一个高性能且最好能够支持异步输出日志的日志框架, ...
Javascript编码规范，好的代码从书写规范开始，增强代码的可读性，可维护性，这是相当重要的！
1. 前言 JavaScript在百度一直有着广泛的应用,特别是在浏览器端的行为管理.本文档的目标是使JavaScript代码风格保持一致,容易被理解和被维护. 虽然本文档是针对JavaScript设 ...
Redis数据类型之Hash（二）
前言: Redis hash是一个String类型的field和value的映射表.添加.删除操作复杂度平均为O(1),为什么是平均呢?因为Hash的内部结构包含zipmap和hash两种.hash特 ...
css 中的背景图片小技巧和存在的坑
body 的背景图设置第一种 :这种情况下背景图片可以缩放但是不能完全等比缩放 background: url(imgs/1.jpg)no-repeat; background-position: ...
node.js 开发环境配置和使用方式
1.在根目录创建一个文件夹里面放入js 编写完成后使用 cmd 进行编译就可以了2.expree 安装卸载: npm uninstall -g express 安装指定版本: npm i ...
学习web前端怎样入门？初学者赶紧看过来！
web前端怎么样才能入门,首先我们要从什么是初级web前端工程师说起: 按照我的想法,我把前端工程师分为了入门.初级.中级.高级这四个级别, 入门级别指的是了解什么是前端(前端到底是什么其实很多人还是 ...
使用r.js来打包模块化的javascript文件
前面的话 r.js(下载)是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小.减少对服务器 ...
干货 | 云智慧透视宝Java代码性能监控实现原理
这篇图文并茂,高端大气上档次,思维缜密的文章,一看就和我平时的风格不同.对了.这不是我写的,是我家高大英俊,写一手好代码,做一手好菜的男神老公的大作,曾发表于技术公号,经本人授权转载~~ 一.Java ...
Mac下将ISO写入U盘镜像
在Mac下面如果想做一个启动U盘,确实不如windows下那么方便,Windows下面有ultraiso+王涛,Mac下面测可以用下面的办法. 打开磁盘工具插入U盘,并在磁盘工具里面找到U盘,把它卸 ...

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

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

随机推荐

热门专题