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占用过高CPU时的优化手段
Mysql占用CPU过高的时候,该从哪些方面下手进行优化?占用CPU过高,可以做如下考虑:1)一般来讲,排除高并发的因素,还是要找到导致你CPU过高的哪几条在执行的SQL,show processli ...
- 解决编译apache出现的问题：configure: error: APR not found . Please read the documentation
今日编译apache时出错: #./configure --prefix……检查编辑环境时出现: checking for APR... no configure: error: APR not fo ...
- SQL Server对Xml字段的操作
T-Sql操作Xml数据 一.前言 SQL Server 2005 引入了一种称为 XML 的本机数据类型.用户可以创建这样的表,它在关系列之外还有一个或多个 XML 类型的列:此外,还允许带有变量和 ...
- checkbox页面全选
http://pan.baidu.com/s/1tfzSa
- Spring 4.0.2 学习笔记(2) - 自动注入及properties文件的使用
接上一篇继续, 学习了基本的注入使用后,可能有人会跟我一样觉得有点不爽,Programmer的每个Field,至少要有一个setter,这样spring配置文件中才能用<property> ...
- [转]关于Python中的yield
在介绍yield前有必要先说明下Python中的迭代器(iterator)和生成器(constructor). 一.迭代器(iterator) 在Python中,for循环可以用于Python中的任何 ...
- c# 调用win32模拟点击的两种方法
第一种 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; ...
- 重建中国.NET生态系统
Neuzilla官方微信公众号:搜 架构师联盟 或 neuzilla 我是.NET铁杆粉丝,所以如果你要在评论里跟我撕逼.NET怎么怎么烂,Java.C++.PHP.JavaScript怎么怎么好,我 ...
- 【语言基础】c++ 备忘录
1. C++ 整数类型范围 可以参照头文件limits.h定义的宏 #define INT_MAX 2147483647(32bit, 最大10位十进制) #define UINT_MAX ...
- express-partials与express4.x不兼容问题
在express中设置view engine为html,express-partials会导致语法不正确,其实只要做一行代码的改动就可以 function renderer(ext){ if(ext[ ...