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下mysqladmin日常管理命令总结
mysqladmin 工具的使用格式:mysqladmin [option] command [command option] command ......参数选项:-c number 自动运行次数统 ...
- Java Web开发Tomcat中三种部署项目的方法
第一种方法:在tomcat中的conf目录中,在server.xml中的,<host/>节点中添加: <Context path="/hello" docBase ...
- poj1190
生日蛋糕 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 18230 Accepted: 6491 Description 7月1 ...
- java多线程系类：基础篇：02常用的实现多线程的两种方式
本章,我们学习"常用的实现多线程的2种方式":Thread 和 Runnable.之所以说是常用的,是因为通过还可以通过java.util.concurrent包中的线程池来实现多 ...
- [转]IIS添加MIME扩展类型及常用的MIME类型列表
http://www.cr173.com/html/18997_1.html 经常我在用IIS做为下载服务器的时候有时传上去的文件比如 xxx.iso 文件名名是传上去了,但是用http打开的时候确显 ...
- 上传Text文档并转换为PDF(解决乱码)
前些日子,Insus.NET有分享一篇<上传Text文档并转换为PDF>http://www.cnblogs.com/insus/p/4313092.html 它是按最简单与默认方式来处理 ...
- Webwork 学习之路【06】Action 调用
一路走来,终于要开始 webwork 核心业务类的总结,webwork 通过对客户端传递的 web 参数重新包装,进行执行业务 Action 类,并反馈执行结果,本篇源码分析对应下图 WebWork ...
- centos 服务器内存管理
du su /目录/ 查看改目录大小 ls -lht / 查看文件详情,显示文件大小(直观) df -h 查看系统内存占用情况
- C#,JavaScript两种语言 2048小游戏
<html> <head> <style type="text/css"> .haha { border-width: 2; font-size ...
- java 常用的一些关键字
1.关键字extends 1.继承作用 优化代码,减少代码的重复使用. 2.继承使用时机 两个类之间必须要满足is a的关系 ,才能够拥有继承关系,不是任 何 情况下都允许继承 3.继承的使用注意事项 ...