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)
在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...
随机推荐
- Mysql慢查询操作梳理
Mysql慢查询解释MySQL的慢查询日志是MySQL提供的一种日志记录,它用来记录在MySQL中响应时间超过阀值的语句,具体指运行时间超过long_query_time值的SQL,则会被记录到慢查询 ...
- ACA烤箱菜单各项温度
说明书找不到了, 网上找到的各项温度说明, 记一个备用 casserole 218度 cake 171度 backery 177度 frozen food 238度 patato 232度 roast ...
- PAT 1010. 一元多项式求导 (25)
设计函数求一元多项式的导数.(注:xn(n为整数)的一阶导数为n*xn-1.) 输入格式:以指数递降方式输入多项式非零项系数和指数(绝对值均为不超过1000的整数).数字间以空格分隔. 输出格式:以与 ...
- NET WebApi OWIN 实现 OAuth 2.0
NET WebApi OWIN 实现 OAuth 2.0 OAuth(开放授权)是一个开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和 ...
- SM2国密证书合法性验证
通常我们遇到过的X509证书都是基于RSA-SHA1算法的,目前国家在大力推行国密算法,未来银行发行的IC卡也都是基于PBOC3.0支持国密算法的,因此我们来学习一下如何验证SM2国密证书的合法性.至 ...
- Webwork 学习之路【03】核心类 ServletDispatcher 的初始化
1. Webwork 与 Xwork 搭建环境需要的的jar 为:webwork-core-1.0.jar,xwork-1.0.jar,搭建webwork 需要xwork 的jar呢?原因是这样的,W ...
- Android 开发1000问笔记
11.android使用全局变量 定义Data类继承Application 在manifest.xml中声明 http://blog.csdn.net/feiyangxiaomi/article/de ...
- jQuery经典学习笔记
1.层次选择器: $("div> span") 获取div下的span元素 $(".one + div") 获取class为one的下一个div 2)过滤 ...
- C++学习准则
C++学习准则 1.把C++当成一门新的语言学习(和C没啥关系!真的): 2.看<Thinking In C++>,不要看<C++变成死相>(C++编程思想,翻译的非常差): ...
- 20160803 - C:\WINDOWS\system32\config\systemprofile\Desktop 不可用的解决
问题:某些软件在从注册表读取用户桌面地址时,欠考虑的%USERPROFILE%的情况,例如迅雷打开文件时,会提示: [Window Title]位置不可用 [Content]C:\WINDOWS\sy ...