正文 

当前位置： 首页 > java > java框架

前端用jquery实现瀑布流效果

Dragonir      2022-02-09     337

关键词：

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实现无限滚动瀑布流实现原理

现在类似于pinterest这类的表现效果很火，其实我比较中意的是他的布局效果，而不是那种瀑布流。虽然我不是特别喜欢这种瀑布流的表现样式，但是还是写了几篇关于无限滚动瀑布流效果的文章，Infinitescroll+Masonry=无限滚动瀑布... 查看详情

前端jquery实现瀑布流(代码片段)

瀑布流是我们经常会见到的东西，一直刷新一直有，其实它实现起来是很简单的。具体代码如下1、css代码 <style>*margin:0;padding:0;.containerposition:relative;.container.boxfloat:left;padding:15px0015px;.container.box.picborder:1pxsolid 查看详情

用jquery实现瀑布流案例

一、瀑布流是我们常见的案例，这里主要讲述，用jquery的方式实现瀑布流的功能！引言：我们经常见到很多网站的瀑布流功能，如淘宝、京东这些商品等等..实现它我们首先考虑几个问题：1、获取到数据  2、排列的方式&n... 查看详情

用javascript和jquery实现瀑布流

▓▓▓▓▓▓大致介绍　　在慕课网上学习了用原生js和jQuery实现瀑布流，在这里做个笔记 ▓▓▓▓▓▓用JavaScript实现　　基本结构：<divid="main"><divclass="box"><divclass="pic"><imgsrc="images/1.jpg"alt=""></div></d... 查看详情

js实现瀑布流效果

Js实现瀑布流效果通过JavaScript实现瀑布流效果，实现不同大小的图片有序展示效果图：思路：1.将图片宽度固定，用浏览器窗口大小除以每个图片的宽度，求出要分成的列数2.将每个图片定位3.每次找到最小高度的列，将图片加到... 查看详情

玩转masonryjs库来实现瀑布流web效果

...在展示页面能看到应用展示图，点击进入Web应用。我不是前端开发者，对HTML,CSS,JS这三剑客仅仅是略知一二。于是先规划了个简单的设计，感觉瀑布流的图片展示方式比较美观，同时布局的高度也一定灵活性。就按照PinterestAndroid... 查看详情

js实现动态瀑布流及放大切换图片效果(js案例)

...了一下当时学js写的一些案例，再次体验了一把用原生JS实现动态瀑布流效果的乐趣，现在把它整理出来，需要的小伙伴可以参考一下。该案例主要是用HTML+CSS控制样式，通过JS实现全局瀑布流以及点击图片放大、上下切换效果。H... 查看详情

用jquery实现瀑布流(方式1-固定宽度和列数，按顺序添加图片)

<!DOCTYPEhtml><htmllang="en"><head>   <metacharset="UTF-8">   <title>瀑布流</title>   <styletype="text/css"> &n 查看详情

wpf下制作的简单瀑布流效果(代码片段)

...流效果比较不错.顺便就搬到了WPF,下面是界面 我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单.1.最重要的就是每个子项的顺序填充,我是把界面看做N列,然后在每列里依次加载子项.最后结果... 查看详情

利用js实现简单的瀑布流效果

...的瀑布流效果吧,我们要先准备好八九张图片,当然啦,我们实现的是瀑布流效果,所以最好是高度不相同的,这样才可以看出来效果,对吧,嘿嘿.二.代码的准备工作　　 我们打开开发工具,先建个html工程,在 查看详情

js实现瀑布流以及加载效果

一、瀑布流是个啥？　　瀑布流，是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。　　最早采用瀑布流布局的网站是Pinterest，逐渐... 查看详情

js实现瀑布流加载图片效果

   今天学习了一个瀑布流加载效果，很多网站都有瀑布流效果，瀑布流就是很多产品显示在网页上，宽相同，高度不同，表现为多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。... 查看详情

网页瀑布流布局jquery实现代码

网页瀑布流布局jQuery实现代码这篇文章主要为大家详细介绍了网页瀑布流布局jQuery实现方式,具有一定的参考价值，感兴趣的小伙伴们可以参考一下 什么是瀑布流网页布局？瀑布流，又称瀑布流式布局。是比较流行的一种网... 查看详情

使用css实现瀑布流效果

CSS实现瀑布流特点：不需要计算，浏览器自动计算，只需设置列宽，性能高；列宽随着浏览器窗口大小进行改变，用户体验不好；图片排序按照垂直顺序排列，打乱图片显示顺序；源代码：html.html:使用列表ul、li引入图片<!DOCTY... 查看详情

在鸿蒙中实现类似瀑布流效果

简介　　鸿蒙OS开发SDK中对于长列表的实现ListContainer的实现较为简单，没法想RecyclerView一样通过使用不同的LayoutManager来实现复杂布局因此没法快速实现瀑布流效果。　　但鸿蒙OS也都支持控件的Measure（onEstimateSize），layout（onArra... 查看详情

flex布局实现瀑布流排版(代码片段)

网上有很多有关js（jq）实现瀑布流和有关瀑布流的插件很多，例如：插件（Masonry，Wookmark等等）。按照正常的逻辑思维，瀑布流的排版（item列表）一般都是由左到右，上而下排序的结果，单纯的css实现这一点有些困难，下面分... 查看详情

纯csscolumn布局实现瀑布流效果

原理CSSproperty:columns。CSS属性columns用来设置元素的列宽和列数。兼容性chrome50+IE10+androidbrowser2.1+with-webkit-MDN文档效果代码<divclass="wrap"><divclass="item"><divclass="item_content 查看详情

dreamweaver怎么实现瀑布流

我是个新手，代码不是很懂首先，dreamweaver是编程只是工具，而瀑布流是靠语言写出来的程序效果，dreamweaver不会帮你实现复杂的应用程序，二者的关系你应该搞明白。其次，瀑布流可以自己编写，javascript加其它动态语言（phpaspj... 查看详情