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/ ...
随机推荐
- Contains Duplicate
Given an array of integers, find if the array contains any duplicates. Your function should return t ...
- ASP.NET MVC学习系列(二)-WebAPI请求(转)
转自:http://www.cnblogs.com/babycool/p/3922738.html 继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的g ...
- 浅谈设计模式--单例模式(Singleton Pattern)
题外话:好久没写blog,做知识归纳整理了.本来设计模式就是个坑,各种文章也写烂了.不过,不是自己写的东西,缺少点知识的存在感.目前还没做到光看即能记住,得写.所以准备跳入设计模式这个大坑. 开篇先贡 ...
- python数字图像处理（8）：对比度与亮度调整
图像亮度与对比度的调整,是放在skimage包的exposure模块里面 1.gamma调整 原理:I=Ig 对原图像的像素,进行幂运算,得到新的像素值.公式中的g就是gamma值. 如果gamma& ...
- [CareerCup] 10.4 Find All Duplicates Elements 寻找所有的重复项
10.4 You have an array with all the numbers from 1 to N, where N is at most 32,000. The array may ha ...
- Android空闲教室查询-资料
这是去年某课程的一个称作“研究型学习”的东西的报告的展示PPT,有点失败的是这个APP的名字起得不太好……PPT上的功能都实现了,其他功能都没有.一年了,程序都忘差不多了,也暂时没有时间分享.就先把P ...
- node 学习笔记 - fs 文件操作
本文同步自我的个人博客:http://www.52cik.com/2015/12/03/learn-node-fs.html 最近看到群里不少大神都开始玩 node 了,我感觉跟他们步伐越来越大了, ...
- [USACO2003][poj2018]Best Cow Fences（数形结合+单调队列维护）
http://poj.org/problem?id=2018 此乃神题……详见04年集训队论文周源的,看了这个对斜率优化dp的理解也会好些. 分析: 我们要求的是{S[j]-s[i-1]}/{j-(i ...
- Linq之Linq to Objects
目录 写在前面 系列文章 linq to objects 总结 写在前面 上篇文章介绍了linq的延迟加载特性的相关内容,从这篇文章开始将陆续介绍linq to Objects,linq to xml ...
- 第二课：判断js变量的类型以及domReady的原理
1.类型的判断: js五种简单数据类型有:null,undefined,boolean,number,string. 还有复杂的数据类型:Object,Function,RegExp,Date,自定义 ...