瀑布流布局js
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>瀑布流布局测试</title>
<style>
body {
background-color: #eee;
font-size: 84%;
text-align: justify;
}
.column {
display: inline-block;
vertical-align: top;
}
.pic_a {
display: block;
padding: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
background-color: #fff;
text-decoration: none;
}
.pic_a img {
display: block;
margin: 0 auto 5px;
border: 0;
vertical-align: bottom;
}
.pic_a strong {
color: #333;
}
</style>
</head> <body>
<div id="container"></div>
<script>
var waterFall = {
container: document.getElementById("container"),
columnNumber: 1,
columnWidth: 210,
// P_001.jpg ~ P_160.jpg
rootImage: "http://cued.xunlei.com/demos/publ/img/",
indexImage: 0, scrollTop: document.documentElement.scrollTop || document.body.scrollTop,
detectLeft: 0, loadFinish: false, // 返回固定格式的图片名
getIndex: function() {
var index = this.indexImage;
if (index < 10) {
index = "00" + index;
} else if (index < 100) {
index = "0" + index;
}
return index;
}, // 是否滚动载入的检测
appendDetect: function() {
var start = 0;
for (start; start < this.columnNumber; start++) {
var eleColumn = document.getElementById("waterFallColumn_" + start);
if (eleColumn && !this.loadFinish) {
if (eleColumn.offsetTop + eleColumn.clientHeight < this.scrollTop + (window.innerHeight || document.documentElement.clientHeight)) {
this.append(eleColumn);
}
}
} return this;
}, // 滚动载入
append: function(column) {
this.indexImage += 1;
var html = '', index = this.getIndex(), imgUrl = this.rootImage + "P_" + index + ".jpg"; // 图片尺寸
var aEle = document.createElement("a");
aEle.href = "###";
aEle.className = "pic_a";
aEle.innerHTML = '<img src="'+ imgUrl +'" /><strong>'+ index +'</strong>';
column.appendChild(aEle); if (index >= 160) {
//alert("图片加载光光了！");
this.loadFinish = true;
} return this;
}, // 页面加载初始创建
create: function() {
this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth); var start = 0, htmlColumn = '', self = this;
for (start; start < this.columnNumber; start+=1) {
htmlColumn = htmlColumn + '<span id="waterFallColumn_'+ start +'" class="column" style="width:'+ this.columnWidth +'px;">'+
function() {
var html = '', i = 0;
for (i=0; i<5; i+=1) {
self.indexImage = start + self.columnNumber * i;
var index = self.getIndex();
html = html + '<a href="###" class="pic_a"><img src="'+ self.rootImage + "P_" + index +'.jpg" /><strong>'+ index +'</strong></a>';
}
return html;
}() +
'</span> ';
}
htmlColumn += '<span id="waterFallDetect" class="column" style="width:'+ this.columnWidth +'px;"></span>'; this.container.innerHTML = htmlColumn; this.detectLeft = document.getElementById("waterFallDetect").offsetLeft;
return this;
}, refresh: function() {
var arrHtml = [], arrTemp = [], htmlAll = '', start = 0, maxLength = 0;
for (start; start < this.columnNumber; start+=1) {
var arrColumn = document.getElementById("waterFallColumn_" + start).innerHTML.match(/<a(?:.|\n|\r|\s)*?a>/gi);
if (arrColumn) {
maxLength = Math.max(maxLength, arrColumn.length);
// arrTemp是一个二维数组
arrTemp.push(arrColumn);
}
} // 需要重新排序
var lengthStart, arrStart;
for (lengthStart = 0; lengthStart<maxLength; lengthStart++) {
for (arrStart = 0; arrStart<this.columnNumber; arrStart++) {
if (arrTemp[arrStart][lengthStart]) {
arrHtml.push(arrTemp[arrStart][lengthStart]);
}
}
} if (arrHtml && arrHtml.length !== 0) {
// 新栏个数
this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth); // 计算每列的行数
// 向下取整
var line = Math.floor(arrHtml.length / this.columnNumber); // 重新组装HTML
var newStart = 0, htmlColumn = '', self = this;
for (newStart; newStart < this.columnNumber; newStart+=1) {
htmlColumn = htmlColumn + '<span id="waterFallColumn_'+ newStart +'" class="column" style="width:'+ this.columnWidth +'px;">'+
function() {
var html = '', i = 0;
for (i=0; i<line; i+=1) {
html += arrHtml[newStart + self.columnNumber * i];
}
// 是否补足余数
html = html + (arrHtml[newStart + self.columnNumber * line] || ''); return html;
}() +
'</span> ';
}
htmlColumn += '<span id="waterFallDetect" class="column" style="width:'+ this.columnWidth +'px;"></span>'; this.container.innerHTML = htmlColumn; this.detectLeft = document.getElementById("waterFallDetect").offsetLeft; // 检测
this.appendDetect();
}
return this;
}, // 滚动加载
scroll: function() {
var self = this;
window.onscroll = function() {
// 为提高性能，滚动前后距离大于100像素再处理
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (!this.loadFinish && Math.abs(scrollTop - self.scrollTop) > 100) {
self.scrollTop = scrollTop;
self.appendDetect();
} };
return this;
}, // 浏览器窗口大小变换
resize: function() {
var self = this;
window.onresize = function() {
var eleDetect = document.getElementById("waterFallDetect"), detectLeft = eleDetect && eleDetect.offsetLeft;
if (detectLeft && Math.abs(detectLeft - self.detectLeft) > 50) {
// 检测标签偏移异常，认为布局要改变
self.refresh();
}
};
return this;
},
init: function() {
if (this.container) {
this.create().scroll().resize();
}
}
};
waterFall.init();
</script>
</body>
</html>
瀑布流布局js的更多相关文章
- javascript实例学习之五——瀑布流布局
瀑布流布局的特征: 1,各列的高度参差不齐 2,页面向下滚动时,自动请求和加载新数据 目前,瀑布流布局的主流实现方式有两种: 1,基于浮动,每一列是一个ul,这些ul都向左浮动,这种方法的好处是布局容 ...
- JS案例之6——瀑布流布局(1)
在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...
- JS 瀑布流布局
瀑布流布局 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- 纯js实现瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...
- JS瀑布流布局模式(1)
在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...
- js网页瀑布流布局
瀑布流布局思路: 1.css样式,图片的父级div样式设置为定位或者浮动 2.找出图片父级元素(box)和最外元素(main):获取box的宽度和main的宽,然后计算main容器一行能容纳多少个bo ...
- JS瀑布流布局
好久没有更新博客喽,今天来说一个瀑布流布局. 瀑布流在很多网站已有很多,现在只说一下简单的实现原理吧, 1.计算一行可以排放几个元素 2.建立一个数组用于存放第一行的每个元素的高度. 3.得到数组中的 ...
- CSS3学习总结——实现瀑布流布局与无限加载图片相册
首先给大家看一下瀑布流布局与无限加载图片相册效果图: 一.pic1.html页面代码如下: <!DOCTYPE html> <html> <head> <me ...
- myWaterfall - jQuery瀑布流布局插件
myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...
随机推荐
- bzoj2693
线性筛+莫比乌斯反演 盗波图 来自candy?大神 反演很重要的一条公式就是[gcd(i,j)==1]= 线性筛怎么推呢? 我们分4个步骤,1.先推出f[1],2.推出f[p],p是一个质数,3.由于 ...
- 【原创】Elasticsearch无宕机迁移节点
官方API文档:https://www.elastic.co/guide/en/elasticsearch/reference/current/allocation-filtering.html 参考 ...
- 洛谷 P3254 圆桌问题【最大流】
s向所有单位连流量为人数的边,所有饭桌向t连流量为饭桌容量的边,每个单位向每个饭桌连容量为1的边表示这个饭桌只能坐这个单位的一个人.跑dinic如果小于总人数则无解,否则对于每个单位for与它相连.满 ...
- [App Store Connect帮助]八、维护您的 App（4.4）重置 App 总评分（iOS、Apple TVOS、macOS）
当您发布新版本时,您可以重置 App 评分.您的产品页将显示一则消息,说明 App 的总评分最近已重置.此消息将一直显示,直到有足够多的顾客对新版本进行了评分且页面出现新的总评分. 评分只可以针对全球 ...
- Apusic中间件结合MyEclipse进行远程调试记录
Apusic中间件结合MyEclipse进行远程调试记录. 在金蝶域中正常部署应用. 启动金蝶中间件时使用"startapusic -ds"命令. 在MyEclipse的Run-- ...
- static属性
static 属于全局,也就是类的属性 和方法,换句话说 一个类,不管有多少个实例,却只有一个全局变量 用static修饰的属性和方法称为静态属性和方法 需要注意的是 静态属性和方法属于类方法,加载类 ...
- VS打包后生成快捷方式：目标指向错误、Icon图标分辨率有误问题解决方案
1.目标指向错误: 在安装***.msi文件后,对快捷方式-->右键-->属性: 发现目标并非指exe文件. 于是我新建了一个快捷方式,将目标-->指向exe文件,位置Ctrl+v. ...
- Spring注解驱动开发之Ioc容器篇
前言:现今SpringBoot.SpringCloud技术非常火热,作为Spring之上的框架,他们大量使用到了Spring的一些底层注解.原理,比如@Conditional.@Import.@Ena ...
- dotnet cors 跨域问题
研究了一整子的.net core框架,感觉挺好用的,可以用在实际项目中,前端avalon框架也在研究: 问题:跨域,相比原来的跨域解决方案,还是有不小的变化的,原来的.net api 只需要在WebA ...
- Android学习笔记（十二） 线程
Android中的线程和Java中的线程使用方法类似,参考(四)Java基础知识回顾 MainThread与WorkerThread UI相关的线程都运行在主线程(MainThread/UIThrea ...