JS 瀑布流布局
瀑布流布局
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>瀑布流布局</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
</head>
<body>
<div id="main">
<div class="box">
<div class="picture">
<img src="http://upload.ct.youth.cn/2014/0930/1412033104340.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://p5.qhimg.com/t010668db2acce1395d.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://www.cnr.cn/newscenter/kjxw/200911/W020091103393137864029.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://img01.cztv.com/201607/27/77b8b4c5ac3accc9a3423ea3875d4893.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://img.newyx.net/article/image/201607/30/ca0fd38253.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://image.sowm.cn/bmyiUz.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://res.kaifu.com/isy/upload/ueditor/image/20130415/lk566j2jyvrk7fjc.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://img.131.com/www/2009/09/12/090912132110343f.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://content.52pk.com/files/110608/309295_100802_12_lit.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://img.article.pchome.net/00/22/68/63/pic_lib/s960x639/058s960x639.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://p14.qhimg.com/t01a21395c7bf8821d2.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://www.8090yxs.com/uploads/allimg/131115/1-1311150922531W.png"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://i-3.497.com/2016/8/11/KDYwMHgpW3dtOjEucG5nLHI6MTMsYjoxM10=/53842181-6952-4107-88a7-e517e7379516.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://img.article.pchome.net/00/23/91/23/pic_lib/s960x639/16s960x639.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://wow.tgbus.com/UploadFiles_2396/200911/20091125174839312.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://pic1.duowan.com/wow/0810/89136647188/89136850739.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://games.enet.com.cn/jzimages/s1085035731.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://images.17173.com/2015/news/2015/09/02/mj0902df04s.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://attachments.gfan.com/forum/201412/10/2248245jjjm1mqmjt7tpqp.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://wow.tgbus.com/UploadFiles_2396/201201/20120111095302802.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://img13.360buyimg.com/n1/g14/M01/09/0E/rBEhV1IB88oIAAAAAAH6XMiLSv4AAB2MgLhPaIAAfp0038.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://gameonline.yesky.com/imagelist/2008/178/2c6x847vix14s.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://content.battlenet.com.cn/wow/media/wallpapers/fan-art/wallpaper19/wallpaper19-1920x1080.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://img1.pcgames.com.cn/pcgames/1011/11/2056569_11.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://digital.365jia.cn/uploads/11/1101/4eaf41afa75f5.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://pic3.duowan.com/newgame/1004/134672767363/134672885615.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://pic38.nipic.com/20140211/17980863_114404420113_2.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://a1.att.hudong.com/86/67/19300533955596133455676114775_950.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://pic.5442.com/2013/0208/07/06.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://upload.520apk.com/news/20141108/47241415426601.jpg"/>
</div>
</div>
<div class="box">
<div class="picture">
<img src="http://pic.3h3.com/up/2014-3/20143322221321031444.jpg"/>
</div>
</div>
</div>
</body>
</html>
HTML中的图片要足够多，撑出滚动条，JS中的滚轮事件才会触发。
CSS
* {
margin:;
padding:;
}
#main {
position: relative;
}
.box {
padding: 15px 0 0 15px;
float: left;
}
.picture {
padding: 10px;
border: 1px solid #aaa;
border-radius: 10px;
box-shadow: 0 0 1px #ccc, 0 0 2px #ccc;
}
img {
width: 150px;
height: auto;
}
img元素定宽之后，高度要设置为auto，否则在IE中有bug。
JavaScript实现瀑布流布局
window.onload = function() {
waterfall();
//JSON数据
var dataInt = {"date":[{"src":"http://content.52pk.com/files/080602/75_174348_lit.jpg"},
{"src":"http://att.bbs.duowan.com/forum/201203/24/0614146ddnfohpzggg3bgg.jpg"},
{"src":"http://u_www.cbigame.com/upload/images/20131225/13879516099458.jpg"},
{"src":"http://att.bbs.duowan.com/forum/month_1007/20100722_8dab40e9c17d1a236050IVlW0OQy2KM2.jpg"},
{"src":"http://pic.baike.soso.com/p/20140331/20140331152345-1045965841.jpg"},
{"src":"http://pic3.duowan.com/wow/0808/83006073078/83006290437.jpg"},
{"src":"http://att.bbs.duowan.com/forum/201303/07/13221633zcz881uwn88ppc.jpg"}]};
//添加事件，动态加载数据块
window.onscroll = function() {
if(checkScrollSlide()) {
//将数据块渲染到页面
var main = document.getElementById("main");
//遍历JSON数据，动态加载
for (var i = 0; i < dataInt.date.length; i++) {
var box = document.createElement("div");
box.className = "box";
main.appendChild(box);
var picture = document.createElement("div");
picture.className = "picture";
box.appendChild(picture);
var image = document.createElement("img");
image.src = dataInt.date[i].src;
picture.appendChild(image);
}
}
//动态加载的数据块也需要瀑布流布局
waterfall();
}
}
//瀑布流布局函数
function waterfall() {
//取得所有在id为main的div下的class值为box的元素
var boxs = getByClass("box", "main");
//取得元素的宽度
var box_width = boxs[0].offsetWidth;
//取得浏览器的宽度，计算每一行的列数，向下取整
var columns = Math.floor(document.documentElement.clientWidth / box_width);
//取得id为main的元素，设置其宽度，让其居中
var main = document.getElementById("main");
main.style.width = columns * box_width + "px";
main.style.margin = "0 auto";
//定义一个数组，用于存放每一列的高度
//这个数组首先保存第一行所有图片的高度
var hArr = [];
for (var i = 0; i < boxs.length; i++) {
if(i < columns) {
hArr.push(boxs[i].offsetHeight);
} else {
var minH = Math.min.apply(null, hArr);
var index = getIndex(minH, hArr);
boxs[i].style.position = "absolute";
boxs[i].style.top = minH + "px";
// boxs[i].style.left = box_width * index + "px";
boxs[i].style.left = boxs[index].offsetLeft + "px";
//更新hArr数组的值
hArr[index] += boxs[i].offsetHeight;
}
}
}
//要查找的元素的className和父元素的id
function getByClass(className, parent_id) {
var parent = document.getElementById(parent_id) || document;
var elements = parent.getElementsByTagName("*");
var eles = [];
for (var i = 0; i < elements.length; i++) {
if(elements[i].className ===className) {
eles.push(elements[i]);
}
}
return eles;
}
function getIndex(element, array) {
//数组的indexOf()是ECMAScript5新增，IE9+才支持
if(array.indexOf) {
var index = array.indexOf(element);
return index;
} else {
for(i in array) {
if(array[i] === element) {
return i;
}
}
}
}
//检测是否具备滚动加载数据块的条件
function checkScrollSlide() {
var main = document.getElementById("main");
var boxs = getByClass("box", "main");
//最后一个数据块的中间位置距离页面顶部的距离
var last_box_H = boxs[boxs.length - 1].offsetTop + Math.floor(boxs[boxs.length - 1].offsetHeight / 2);
//页面滚动的距离
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//页面可视区域的高度
var client_height = document.documentElement.clientHeight || document.body.clientHeight;
//比较最后一个数据块距离页面顶部的距离是否小于页面滚动的距离加上页面可视区域的高度，如果小于则返回true
return (last_box_H < scrollTop + client_height) ? true : false;
}
scroll事件需要添加到window上，如果添加到document上，IE8及之前版本没有效果。
动态添加的数据块有限，但是却能无限加载，原因未知。。。
jQuery实现瀑布流布局
$(document).ready(function() {
waterfall();
var dataInt = {"data":[{"src":"http://content.52pk.com/files/080602/75_174348_lit.jpg"},
{"src":"http://att.bbs.duowan.com/forum/201203/24/0614146ddnfohpzggg3bgg.jpg"},
{"src":"http://u_www.cbigame.com/upload/images/20131225/13879516099458.jpg"},
{"src":"http://att.bbs.duowan.com/forum/month_1007/20100722_8dab40e9c17d1a236050IVlW0OQy2KM2.jpg"},
{"src":"http://pic.baike.soso.com/p/20140331/20140331152345-1045965841.jpg"},
{"src":"http://pic3.duowan.com/wow/0808/83006073078/83006290437.jpg"},
{"src":"http://att.bbs.duowan.com/forum/201303/07/13221633zcz881uwn88ppc.jpg"}]};
$(window).scroll(function() {
if(checkScrollSlide()) {
$.each(dataInt.data, function(key, value) {
var box = $("<div>").addClass("box").appendTo($("#main"));
var picture = $("<div>").addClass("picture").appendTo($(box));
$("<img>").attr("src",$(value).attr("src")).appendTo($(picture));
})
waterfall();
}
})
});
function waterfall() {
var boxs = $("#main .box");
var box_w = boxs.eq(0).outerWidth();
var colomns = Math.floor($(window).width() / box_w);
$("#main").width(box_w*colomns).css("margin","0 auto");
var hArr = [];
boxs.each(function(index, value) {
var box_h = boxs.eq(index).outerHeight();
if(index < colomns) {
hArr.push(box_h);
} else {
var minH = Math.min.apply(null, hArr);
var minH_index = $.inArray(minH, hArr);
$(value).css({
"position":"absolute",
"top":minH + "px",
"left":minH_index*box_w + "px"
})
hArr[minH_index] += boxs.eq(index).outerHeight();
}
})
}
function checkScrollSlide() {
var last_box = $("#main .box").last();
var box_h = last_box.offset().top + Math.floor(last_box.outerHeight() / 2);
var scrollTop = $(window).scrollTop();
var client_h = $(window).height();
return (box_h < scrollTop + client_h) ? true : false;
}
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
与原生JS思路一样，只是写法不同，代码量少一半。。。
CSS3多栏布局
* {
margin:;
padding:;
}
.box {
padding: 15px 0 0 15px;
}
.picture {
width: 150px;
padding: 10px;
border: 1px solid #aaa;
border-radius: 10px;
box-shadow: 0 0 1px #ccc, 0 0 2px #ccc;
}
img {
width: 150px;
height: auto;
display: block;
}
/*CSS3实现多栏布局*/
#main {
-webkit-column-width: 187px;
-moz-column-width: 187px;
-o-column-width: 187px;
-ms-column-width: 187px;
}
图片的排列顺序为从上到下，从左到右，与一般情况下的排列顺序不同。
IE10+支持这个属性。
JS 瀑布流布局的更多相关文章
- JS瀑布流布局模式(1)
在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...
- JS瀑布流布局
好久没有更新博客喽,今天来说一个瀑布流布局. 瀑布流在很多网站已有很多,现在只说一下简单的实现原理吧, 1.计算一行可以排放几个元素 2.建立一个数组用于存放第一行的每个元素的高度. 3.得到数组中的 ...
- JS瀑布流布局模式(2)
这个例子与上一篇类似,唯一的区别是排序的方式有差别.上一篇是在高度最小的列里插入内容,这个案例是按顺序放置内容. 两种方法各有优缺点.第一种需要在图片内容加载完成的情况下有效,各个列的图高度差异不大. ...
- JS案例之6——瀑布流布局(1)
在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...
- 纯js实现瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...
- js网页瀑布流布局
瀑布流布局思路: 1.css样式,图片的父级div样式设置为定位或者浮动 2.找出图片父级元素(box)和最外元素(main):获取box的宽度和main的宽,然后计算main容器一行能容纳多少个bo ...
- 瀑布流布局js
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
- CSS3学习总结——实现瀑布流布局与无限加载图片相册
首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...
- myWaterfall - jQuery瀑布流布局插件
myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...
随机推荐
- log4j输出日志乱码(转)
log4j日志文件乱码问题的解决方法 log4j日志文件中文乱码处理方法 log4j 控制台和文件输出乱码问题解决 写在前面,第三篇文章中将原因解释的最清楚,为什么设置为UTF-8或者GBK就生效了, ...
- Virtualbox下Ubuntu与主机Win7共享文件夹
记下来,免得老google. 1. 在虚拟机设置里设置好win7的共享文件夹位置:如c:\share 2.确定ubuntu下需要共享的文件夹,如~/linuxshare.注意,此文件夹名字必须与win ...
- MVC出错案例之一：主外键映射失败
今天在编写DomainModel和DomainMapper,最后放到OnModelCreating中运行的时候,给我抛出了如下错误: One or more validation errors wer ...
- 使用AVFoundation仅仅生成缩略图，不进行播放视频（本地和网络文件都可以创建视频缩略图）
使用MPMoviePlayerController来生成缩略图足够简单,但是如果仅仅是是为了生成缩略图而不进行视频播放的话,此刻使用 MPMoviePlayerController就有点大材小用了.其 ...
- pythonchallenge(二)
PythonChallenge_2 一.实验说明 1. 环境登录 无需密码自动登录,系统用户名shiyanlou,密码shiyanlou 2. 环境介绍 本实验环境采用带桌面的Ubuntu Linux ...
- unity3d 纹理动画
不知道大家有没有玩过赛车游戏 赛车游戏的跑道有路标,如下图 玩过赛车游戏的都知道,大多数赛车游戏的路标是会动的,如上图,它会从右往左运动 不会发动态图,大家脑补一下吧 没有玩过赛车游戏的也不要紧,大家 ...
- Java实现文件的加密与解密
最近在做一个项目,需要将资源文件(包括图片.动画等类型)进行简单的加密后再上传至云上的服务器,而在应用程序中对该资源使用前先将读取到的文件数据进行解密以得到真正的文件信息.此策略的原因与好处是将准备好 ...
- 标准I/O
在程序运行时,会默认为我们打开三个流:标准输入流.标准输出流.标准出错流. 标准输入流一般对应我们的键盘 标准输出流一般对应显示器 标准出错流一般也对应显示器 1.标准输入流 在标准I/O中,java ...
- 第二十六课：jQuery对事件对象的修复
因为原生的event对象,在不同浏览器下,有不同的属性和方法,因此需要用jQuery进行兼容. jQuery在这里分两步走,首先创建一个伪事件类jQuery.Event(jQuery里面自定义的事件类 ...
- 团队项目NABCD模型的需求分析
团队项目NABCD模型的需求分析 NABCD模型的介绍 Need(需求)-现在市场上未被满足但又急需满足的客户需求是什么?Approach(方法)-要满足这种需求,我能够提出什么独特的方法吗?Bene ...