js实现网页瀑布流布局
效果图：
html代码实现网页布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>waterfall</title>
<link rel="stylesheet" href="css/main.css">
<script src="js/main.js"></script>
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="data:images/img_1.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_2.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_3.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_4.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_5.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_6.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_7.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_8.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_9.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_10.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_11.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_12.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_13.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_14.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_15.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_16.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_17.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_18.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_19.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_20.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_21.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_22.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_23.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_24.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_25.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_26.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_27.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_28.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_29.jpg" alt="...">
</div>
</div>
<div class="box">
<div class="pic">
<img src="data:images/img_30.jpg" alt="...">
</div>
</div>
</div> </body>
</html>
css控制网页样式:
* {
margin:;
padding:;
}
.main {
}
.box {
float:left;
padding: 7px;
}
.pic img{
width:300px;
height: auto;
border-radius: 5px;
}
其效果体验为：
1、当你滚动滚动条时（既鼠标下拉），网页图片会随着你的下拉不断的呈现出来源源不断（不是很多图片，是通过js让其以json的格式传递数据，然后然这些图片数据不断重复出现）。
2、图片等宽不等高，参差不齐，很有艺术感（文艺旅游相册网站），你懂的。
js实现瀑布流效果：
window.onload = function(){
waterfall("main","box");
var dataInt = {'data':[{"src":"img_1.jpg"},{"src":"img_2.jpg"},{"src":"img_3.jpg"},{"src":"img_4.jpg"},{"src":"img_5.jpg"},{"src":"img_6.jpg"},{"src":"img_7.jpg"},{"src":"img_8.jpg"},{"src":"img_9.jpg"},{"src":"img_10.jpg"},{"src":"img_11.jpg"},{"src":"img_12.jpg"},{"src":"img_13.jpg"},{"src":"img_14.jpg"},{"src":"img_15.jpg"},{"src":"img_16.jpg"},{"src":"img_17.jpg"},{"src":"img_18.jpg"},{"src":"img_19.jpg"},{"src":"img_20.jpg"},{"src":"img_21.jpg"},{"src":"img_1.jpg"},{"src":"img_22.jpg"},{"src":"img_24.jpg"},{"src":"img_25.jpg"},{"src":"img_26.jpg"},{"src":"img_27.jpg"},{"src":"img_28.jpg"},{"src":"img_29.jpg"},{"src":"img_30.jpg"}]}
window.onscroll=function(){
if(checkScrollSlide){
var oParent = document.getElementById('main');
for(var i=0;i<dataInt.data.length;i++){
var oBox = document.createElement('div');
oBox.className='box';
oParent.appendChild(oBox);
var oPic = document.createElement('div');
oPic.className='pic';
oBox.appendChild(oPic);
var oImg = document.createElement('img');
oImg.src="data:images/"+dataInt.data[i].src;
oPic.appendChild(oImg);
}
waterfall("main","box");
}
}
}
function waterfall(parent, box){
var oParent = document.getElementById(parent);
var oBoxs = getByClass(oParent,box);
var oBoxw = oBoxs[0].offsetWidth;
var cols = Math.floor(document.documentElement.clientWidth/oBoxw);
oParent.style.cssText = "width:"+oBoxw*cols+"px;margin: 0 auto";
var hArr = [];
for(var i = 0; i<oBoxs.length;i++){
if(i<cols){
hArr.push(oBoxs[i].offsetHeight);
}else{
var minH = Math.min.apply(null, hArr);
var index = getMinhIndex(hArr,minH);
oBoxs[i].style.position="absolute";
oBoxs[i].style.top=minH+"px";
oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';
hArr[index] += oBoxs[i].offsetHeight;
}
}
}
function getByClass(parent, clsName){
var boxArr = new Array(),
oElements = parent.getElementsByTagName('*');
for(var i=0; i<oElements.length;i++){
if(oElements[i].className==clsName)
boxArr.push(oElements[i]);
}
return boxArr;
}
function getMinhIndex(arr, val){
for(var i in arr){
if(arr[i]==val){
return i;
}
}
}
function checkScrollSlide (){
var oParent = document.getElementById(parent);
var oBoxs = getByClass(oParent,box);
var lastBoxH = oBoxs[oBox.length-1].offsetTop;
var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
var height = document.body.clientHeight||document.documentElement.clientHeight;
return (lastBoxH<scrollTop+height)?true:false;
}
js实现网页瀑布流布局的更多相关文章
- js网页瀑布流布局
瀑布流布局思路: 1.css样式,图片的父级div样式设置为定位或者浮动 2.找出图片父级元素(box)和最外元素(main):获取box的宽度和main的宽,然后计算main容器一行能容纳多少个bo ...
- 网页瀑布流布局插件Masonry
CSS3有实现类似瀑布流布局的属性column,但是遗憾的是这种布局是纵向布局而不支持横向布局.所以比较合适用于文字多列布局. 调用JQuery WaterFall布局插件:http://masonr ...
- 原生js实现图片瀑布流布局，注释超详细
完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- JS原生效果瀑布流布局的实现(一)
JS原生效果 实现: HTML页面布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...
- 原生js实现的瀑布流布局
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 纯js实现瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...
- JS案例之6——瀑布流布局(1)
在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...
- JS 瀑布流布局
瀑布流布局 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- JS瀑布流布局模式(1)
在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...
随机推荐
- PHP中调用move_uploaded_file函数提示failed to open stream和 Unable to move
在做一个PHP文件上传系统的时候,使用move_uploaded_file进行文件上传,提示下面两个warning,不能成功上传文件 Warning: move_uploaded_file(uploa ...
- Windows Server 2008 R2中的ASP.NET环境架设
.NET Framework的部分功能在Windows Server 2008 R2得到支持,包括:.NET 2/3/3.5的子集和ASP.NET.另外,PowerShell也在Server Core ...
- SQL Server之游标的基础知识
什么是游标: 游标是可以在结果集中上下游动的指针. 游标的作用: --允许定位到结果集中的特定行. --从结果集的当前位置检索一行或多行数据. --支持对结果集中当前位置的行进行修改. 注意:游标虽然 ...
- mybatis的物理分页：mybatis-paginator
github上有一个专门针对mybatis的物理分页开源项目:mybatis-paginator,兼容目前绝大多数主流数据库,十分好用,下面是使用步骤: 环境:struts2 + spring + m ...
- jboss的时区问题
默认情况下,jboss启动时,使用的时区是“+0:00”区,而中国所在的时间为"+8:00"区(所谓的东8区),最终java取当前时间时,总比北京时间慢8个小时 解决办法: 新建一 ...
- JavaScript：关于事件处理程序何时可以直接访问元素的属性
指定在元素的的事件处理程序中指定 <input type="button" value="click me" onclick="alert(th ...
- Atom插件安装
Atom插件安装 Atom狂拽炫酷插件之activate-power-mode 引语: 在前文中提到了关于插件的安装,似乎简单易操作,不过最后我发现是我自己想简单了. activate-power-m ...
- devexpress xtrareport 并列绑定两个数据源,如何实现？
如下图,要在xtrareport 并列绑定两个不同的数据源datatable1和datatable 2,并且table1中的只有10行数据,table2中有20行数据,如何实现
- DOM 概况
DOM(文档对象模型)是针对 HTML 和 XML 文档的一个API(应用程序编程接口).DOM 描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 层次节点 DOM可以将任何 H ...
- 我所认识的javascript正则表达式
前言 如果说这是一篇关于正则表达式的小结,我更愿意把它当做一个手册. 目录:(点击可直达) RegExp 三大方法(test.exec.compile) String 四大护法(search.matc ...