window.onload = function () {
var d1 = new Waterfall();
d1.init();
};
//构造函数
function Waterfall() {
this.oColNum =null;//显示列数
this.oData = null; //存储请求数据
this.settings ={
width:300,
autoLoad:true
}
}
//初始化方法
Waterfall.prototype.init = function (opt) {
extend(this.settings,opt);
this.requestData();
var that = this;
window.onresize = function(){
that.init();
}; //滚动无限加载
if(this.settings.autoLoad){
// var that = this;
window.onscroll = function(){
if(getScrollTop() + getWindowHeight() == getScrollHeight()){
that.recreateEle();
}
};
}
};
//创建item
Waterfall.prototype.createItem = function (Data) {
var owater = document.getElementById("water-content");
var html="";
this.oData = Data;
var _this = this;
// console.log(this.oData.waterfall);
this.oData.waterfall.forEach(function (item,index) {
html +='<div class="waterfall-item" style="width: '+_this.settings.width+"px"+'"><div class="waterfall-img"><img class="waterfall-images" src="'+item.src+'"></div><div class="info"><span>'+item.name+'</span></div></div>';
});
owater.innerHTML=html;
}; //请求获取数据
Waterfall.prototype.requestData =function () {
var xmlhttp;
var data=null;
var _this=this;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
} xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
data=eval('(' +xmlhttp.responseText+ ')');
//渲染数据
_this.createItem(data); //存储img的src
var src =document.getElementsByClassName("waterfall-images"); //循环遍历创建 new Image;对象,保证onload事件执行,以获取加载img的div高度
for(var i = 0; i<src.length;i++){
var img = new Image();
img.onload =function () {
// console.log(img.src); //设置位置样式 _this.setWaterfall(); };
img.src = src[i].src;
} }
};
xmlhttp.open("GET","waterfall.json",true);
xmlhttp.send(); };
//排版布局
Waterfall.prototype.setWaterfall = function () {
this.oColNum = parseInt(viewWidth()/this.settings.width);
var oColNumHeight = [];//存储每一列的高度 for(var i = 0;i<this.oColNum;i++){
oColNumHeight.push(0);
} var items =document.getElementsByClassName("waterfall-item");
//遍历设置元素位置
for(var i = 0; i < items.length; i++){
var curEle = items[i],
idx = 0;//存储最小值对应索引
var minHeight = oColNumHeight[0];//临时存储最小高度
//获取最小高度,以放置元素 for(var j = 0; j < oColNumHeight.length; j++){ if( minHeight >oColNumHeight[j]){
minHeight = oColNumHeight[j];
idx = j; } } //设置元素位置
curEle.style.left = curEle.offsetWidth * idx +"px";
curEle.style.top = minHeight + "px"; // //更新每列的高度数据 oColNumHeight[idx] = oColNumHeight[idx]+ curEle.offsetHeight; } // for (var i = 0; i<items.length ;i++){
// items[i].className = 'waterfall-item';
// } // items.forEach(function (item,index) {
// var curEle = item,
// idx =0,
// minHeight = that.oColNumHeight[0];
// for(var i = 0; i<that.oColNumHeight.length;i++){
// if(minHeight>that.oColNumHeight[i]){
// minHeight = that.oColNumHeight[i];
// idx = i;
// }
// }
// curEle.style.left = that.settings.width*idx +"px";
// curEle.style.top = minHeight + "px";
// that.oColNumHeight[idx] = minHeight + curEle.style.height;
//
// })
}; //滚动无限加载
Waterfall.prototype.recreateEle = function () {
var dataSrc = {
"data":[
{
"src":"1.jpg",
"name":"重加载!"
},
{
"src":"5.jpg",
"name":"重加载!"
},
{
"src":"3.jpg",
"name":"重加载!"
},
{
"src":"6.jpg",
"name":"重加载!"
},
{
"src":"9.jpg",
"name":"重加载!"
},
{
"src":"8.jpg",
"name":"重加载!"
},
{
"src":"1.jpg",
"name":"重加载!"
},
{
"src":"5.jpg",
"name":"重加载!"
},
{
"src":"3.jpg",
"name":"重加载!"
},
{
"src":"6.jpg",
"name":"重加载!"
},
{
"src":"9.jpg",
"name":"重加载!"
},
{
"src":"8.jpg",
"name":"重加载!"
}
]
};
var _this =this;
var oDiv = document.getElementById("water-content");
// <div class="waterfall-img"><img class="waterfall-images" src="'+item.src+'"></div><div class="info"><span>'+item.name+'</span></div>
//创建加载的元素
for (var i = 0; i < dataSrc.data.length;i++){
var oItem = document.createElement("div");
oItem.className = "waterfall-item";
oItem.style.width = _this.settings.width +'px';
oDiv.appendChild(oItem); var oItemImg = document.createElement("div");
oItemImg.className = 'waterfall-img';
oItem.appendChild(oItemImg); var oImg = document.createElement("img");
oImg.className = 'waterfall-images';
oImg.src =dataSrc.data[i].src;
oItemImg.appendChild(oImg); var oInfoDiv = document.createElement("div");
oInfoDiv.className = 'info';
oItem.appendChild(oInfoDiv); var oSpan = document.createElement("span");
oSpan.innerHTML = dataSrc.data[i].name;
oInfoDiv.appendChild(oSpan);
}
//存储img的src
var src =document.getElementsByClassName("waterfall-images"); // console.log(src);
//循环遍历创建 new Image;对象,保证onload事件执行,以获取加载img的div高度
for(var i = src.length - 1; i > src.length - dataSrc.data.length;i--){
var img = new Image();
img.onload =function () { //设置位置样式
_this.setWaterfall();
// console.log('.....')
};
img.src = src[i].src;
} }; //获取浏览器可视宽度
function viewWidth() {
return document.documentElement.clientWidth;
}
//实现复制
function extend(obj1,obj2) {
for(var attr in obj2){
obj1[attr] = obj2[attr];
}
} //滚动条在Y轴上的滚动距离 function getScrollTop(){
var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
if(document.body){
bodyScrollTop = document.body.scrollTop;
}
if(document.documentElement){
documentScrollTop = document.documentElement.scrollTop;
}
scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
return scrollTop;
} //文档的总高度 function getScrollHeight(){
var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
if(document.body){
bodyScrollHeight = document.body.scrollHeight;
}
if(document.documentElement){
documentScrollHeight = document.documentElement.scrollHeight;
}
scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
return scrollHeight;
} //浏览器视口的高度 function getWindowHeight(){
var windowHeight = 0;
if(document.compatMode == "CSS1Compat"){
windowHeight = document.documentElement.clientHeight;
}else{
windowHeight = document.body.clientHeight;
}
return windowHeight;
}
js实现瀑布流布局的更多相关文章
-
纯js实现瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...
-
js网页瀑布流布局
瀑布流布局思路: 1.css样式,图片的父级div样式设置为定位或者浮动 2.找出图片父级元素(box)和最外元素(main):获取box的宽度和main的宽,然后计算main容器一行能容纳多少个bo ...
-
原生JS实现瀑布流布局
瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 1.首先瀑布流所有的图片应该保持宽度一致,高 ...
-
JS案例之6——瀑布流布局(1)
在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...
-
JS 瀑布流布局
瀑布流布局 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
-
JS瀑布流布局模式(1)
在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...
-
JS瀑布流布局
好久没有更新博客喽,今天来说一个瀑布流布局. 瀑布流在很多网站已有很多,现在只说一下简单的实现原理吧, 1.计算一行可以排放几个元素 2.建立一个数组用于存放第一行的每个元素的高度. 3.得到数组中的 ...
-
js实现网页瀑布流布局
效果图: html代码实现网页布局: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
-
瀑布流布局js
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
随机推荐
-
【Fine原创】常见的HTTP错误码的具体含义整理
常见的HTTP错误码的具体含义 "100" : Continue 客户端应当继续发送请求. "101" : witching Protocols ...
-
[WebService]之代码优先方法与契约优先方法
什么是 web 服务? web 服务是对应用程序功能的网络访问接口,它是使用标准 Internet 技术构建的. 我们目前看到的部署在 Internet 上的 web 服务都是 HTML 网站.其中, ...
-
《Velocity java开发指南》中文版(下)转载
文章出自:http://sakyone.iteye.com/blog/524292 8.Application Attributes Application Attributes (应用程序属性)是和 ...
-
AdminLTE的使用
1.AdminLTE的必要配置文件<!-- Tell the browser to be responsive to screen width --> <meta content=& ...
-
Vue插槽:(2.6.0以后版本弃用slot和slot-scope,改用v-slot)
关于Vue插槽的概念,大家可以从vue官网的api查看,我是看到网站的对于初接触 这个要概念的人来说不是很清楚,我来贴下原码,就比较直观了 贴下原码: 具名插槽:v-slot:header Html: ...
-
mongdb的索引及备份
1. mongodb的索引 1.1 为什么mongdb需要创建索引 加快查询速度 进行数据的去重 1.2 mongodb创建简单的索引方法 语法: db.集合.ensureIndex({属性:1}), ...
-
学习笔记19—dpabi错误集
1.回归斜边量的时候千万不要用红色标记的地方,而要用紫色标记的地方
-
perl 截取 fastq文件
#!/usr/bin/perl -w use warnings; use strict; input_fastq trim_length}; ; my ($fastq, $trim_length) = ...
-
element 表格元素 超链接
1.在循环体中的事件绑定 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
-
微信小程序组件 模块化错和叹号
wxml 页面 <import src="/pages/lianxi/lianxi.wxml" /> //引入文件 <view style='position: ...