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)
在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...
随机推荐
- c++ 基于wincrypt的DES CBC模式加解密
des.h #pragma once #include <windows.h> #include <atlstr.h> #include <wincrypt.h> ...
- js禁止用户右键等操作
<script type="text/javascript"> document.oncontextmenu=function(){return false}; ...
- 为easyui datagrid 添加上下方向键移动
将以下脚本保存为 easyui-datagrid-moverow.js var DatagridMoveRow = (function($){ function DatagridMoveRow(gri ...
- Apache Shiro 使用手册（一）Shiro架构介绍 - kdboy - ITeye技术网站
转载 原文地址 http://kdboy.iteye.com/blog/1154644 一.什么是Shiro Apache Shiro是一个强大易用的Java安全框架,提供了认证.授权.加密和会话管理 ...
- 系统升级日记（3）- 升级SharePoint解决方案和Infopath
最近一段时间在公司忙于将各类系统进行升级,其最主要的目标有两个,一个是将TFS2010升级到TFS2013,另外一个是将SharePoint 2010升级到SharePoint 2013.本记录旨在记 ...
- 优秀开源代码解读之JS与iOS Native Code互调的优雅实现方案
简介 本篇为大家介绍一个优秀的开源小项目:WebViewJavascriptBridge. 它优雅地实现了在使用UIWebView时JS与ios 的ObjC nativecode之间的互调,支持消息发 ...
- 拼图游戏(js,C#,java三种语言)
<html> <head> <meta charset="utf-8"> <style type="text/css" ...
- jq实现登陆页面的拖拽功能
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...
- ClipDrawable 实现图片渐变现实
clip.xml <?xml version="1.0" encoding="utf-8"?><clip xmlns:android=&quo ...
- WPS显示无法创建对象，请确认对象已在系统注册表中注册
第一种方法:在系统的开始--所有程序找到WPS--WPS office工具--配置工具--高级--兼容设置,在这里勾选兼容第三方系统和软件. 第二种方法: xp/win7系统:拷贝packager.e ...