面向对象js瀑布流效果
index.html
<!doctype html>
<html lang="en">
<head>
<!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>面向对象js瀑布流</title>
<link href="css/css.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="main">
<div class="box">
<div class="img"><img src="data:images/0.jpg"/></div>
</div>
<div class="box">
<div class="img"><img src="data:images/1.jpg"/></div>
</div>
<div class="box">
<div class="img"><img src="data:images/2.jpg"/></div>
</div>
<div class="box">
<div class="img"><img src="data:images/3.jpg"/></div>
</div>
<div class="box">
<div class="img"><img src="data:images/4.jpg"/></div>
</div>
<div class="box">
<div class="img"><img src="data:images/5.jpg"/></div>
</div> <div class="box">
<div class="img"><img src="data:images/6.jpg"/></div>
</div>
<div class="box">
<div class="img"><img src="data:images/7.jpg"/></div>
</div> <div class="box">
<div class="img"><img src="data:images/8.jpg"/></div>
</div>
<div class="box">
<div class="img"><img src="data:images/9.jpg"/></div>
</div>
<div class="box">
<div class="img"><img src="data:images/10.jpg"/></div>
</div>
<div class="box">
<div class="img"><img src="data:images/11.jpg"/></div>
</div> <div class="box">
<div class="img"><img src="data:images/12.jpg"/></div>
</div>
<div class="box">
<div class="img"><img src="data:images/13.jpg"/></div>
</div>
<div class="box">
<div class="img"><img src="data:images/14.jpg"/></div>
</div>
<div class="box">
<div class="img"><img src="data:images/15.jpg"/></div>
</div>
<div class="box">
<div class="img"><img src="data:images/16.jpg"/></div>
</div>
<div class="box">
<div class="img"><img src="data:images/17.jpg"/></div>
</div>
<div class="box">
<div class="img"><img src="data:images/18.jpg"/></div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</body>
</html>
css.css
*{margin:0px;padding:0px;font-family:'迷你简卡通';}
html,body{width:100%;height:100%;}
ul{list-style:none;}
img{border:0px;}
#main{position:relative;}
#main .box{padding:10px 0px 0px 10px;float:left;
}
#main .box .img{padding:10px;box-shadow: 0 0 6px #ccc;border-radius: 5px;border:1px solid #ccc;}
#main .box .img img{width:162px;height:auto}
js.js
window.onload=function(){
var attr={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
new Waterfull("main","box",attr).start()
}
function Waterfull(id,box,attr){
this.dataInt=attr;
this.id=id;
this.box=box;
this.num=6;
}
Waterfull.prototype={
start:function(){
var _this=this;
var oParent=document.getElementById(this.id);
var attr=getclass(oParent,this.box);
var iPinW=attr[0].offsetWidth;// 一个块框pin的宽
oParent.style.cssText='width:'+iPinW*this.num+'px;margin:0px auto;';
this.position1()//初始化加载HTML中的图片
window.onscroll=function(){
_this.scroll()
}
},
position1:function(){//图片DIV定位
var oParent=document.getElementById(this.id);
var attr=getclass(oParent,this.box);
var hattr=[];
for(var i=0;i<attr.length;i++){
if(i<this.num){
hattr.push(attr[i].offsetHeight)
}
else{
var minH=Math.min.apply(null,hattr);//继承属性
var index=getindex(minH,hattr)
attr[i].style.position="absolute";
attr[i].style.left=attr[index].offsetLeft+"px";
attr[i].style.top=minH+"px";
hattr[index]+=attr[i].offsetHeight;
}
}
},
checkscroll:function(){//判断是否加载
var oParent=document.getElementById(this.id);
var attr=getclass(oParent,this.box);
lastH=attr[attr.length-1].offsetTop+parseInt(attr[attr.length-1].offsetHeight/2);
scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
client=document.documentElement.clientHeight;
return (lastH<client+scrolltop)?true:false
},
scroll:function(){//加载
var oParent=document.getElementById(this.id);
var attr=getclass(oParent,this.box);
if(this.checkscroll()){
for(var i in this.dataInt.data){
var obox=document.createElement("div");
obox.className="box";
oParent.appendChild(obox)
var oimg=document.createElement("div");
oimg.className="img";
obox.appendChild(oimg);
var img=document.createElement("img");
img.src='images/'+this.dataInt.data[i].src;//dataInt["data"][i]也可
oimg.appendChild(img);
}
}
this.position1()//加载图片后重新定位。
}
}
//获取CLASS函数
function getclass(parent,className){
var obj=parent.getElementsByTagName('*');
var pinS=[];
for (var i=0;i<obj.length;i++) {
if (obj[i].className==className){
pinS.push(obj[i]);
}
};
return pinS;
}
//获取数组中一个值的索引。
function getindex(a,hattr){
for(var i=0;i<hattr.length;i++){
if(hattr[i]==a){
return i
}
}
}
面向对象js瀑布流效果的更多相关文章
- JS 瀑布流效果
JS瀑布流效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
- JS瀑布流效果
本篇内容实现类似百度图片的呈现功能,瀑布流+自动加载 index13.html <!DOCTYPE html> <html> <head> <meta cha ...
- 手把手教你js原生瀑布流效果实现
手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...
- 利用JS实现简单的瀑布流效果
哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了 ...
- js图片瀑布流效果
要实现图片瀑布流效果,首先得准备几张图片. html的部分比较简单就是将图片加载到浏览器就可以了 代码如下(注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果): <!DOCTYPE ...
- js 实现图片瀑布流效果，可更改配置参数 带完整版解析代码[waterFall.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...
- 使用JS实现图片展示瀑布流效果
不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度 ...
- WPF下制作的简单瀑布流效果
最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面 我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单. 1.最重要的 ...
- 用jQuery实现瀑布流效果学习笔记
jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...
随机推荐
- Spring框架：Spring容器具体解释
Spring容器 Spring容器能够帮助你管理所有的Bean对象.专业术语称之为IoC控制反转.在传统的程序中.对象的生成都是由开发人员完毕的.而在控制反转中,对象的生成所有都交给框架完毕.这种优点 ...
- 关于Opengl中将24位BMP图片加入�一个alpha通道并实现透明的问题
#include <windows.h>#include <GL/glut.h>#include <GL/glaux.h>#include <stdio.h& ...
- android线程与线程池-----线程池（二）《android开发艺术与探索》
android 中的线程池 线程池的优点: 1 重用线程池中的线程,避免了线程的创建和销毁带来的性能开销 2 能有效的控制最大并发数,避免大量线程之间因为喜欢抢资源而导致阻塞 3 能够对线程进行简单的 ...
- GitHub安装失败
安装GitHub客户端的时候,会提示失败,如下: An error occurred trying to download 'http://github-windows.s3.amazonaws.co ...
- C#网站实现QQ第三方登陆# C#快速开发教程
C#网站实现QQ第三方登陆 说起在网站上面可以直接使用QQ登录功能大家并不陌生.但翻其官方提供的SDK包中却没有C#方向的. 但是我们有个牛人叫张善友,做了一个民间SDK.下面我们就是用他所写的SDK ...
- 2015前端各大框架比较（angular,vue,react,ant）
前端流行框架大比拼 angular vue react ant-design angularjs angular是个MVVM的框架.针对的是MVVM这整个事.angular的最主要的场景就是单页应用, ...
- Gradle插件
1.方法数统计 classpath 'com.getkeepsafe.dexcount:dexcount-gradle-plugin:0.6.1' apply plugin: 'com.getkeep ...
- H TML5 之 （2） 小试牛刀
基本的HTML都认识到了,就开始运用下了,大的程序的开始,都是从一个一个表达式慢慢的堆积起来的 想开始玩HTML5,就开始理解,它所提供的画布函数各有什么作用,API的具体使用,才能完成自己想要完成的 ...
- ActionLink 的一些小问题
近日为群友解答问题时遇到一个问题 由于自己以前确实没碰到过 特此记录一下 起因是群友想要用htmlhelper实现这样一个效果 <a href="我是链接" class=&q ...
- Sql Server 2008 还原数据库 3154错误
sqlserver2008还原数据库时出现了3154错误,具体错误信息如下: 错误信息 The backup set holds a backup of a database other than t ...