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瀑布流效果的更多相关文章

  1. JS 瀑布流效果

    JS瀑布流效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  2. JS瀑布流效果

    本篇内容实现类似百度图片的呈现功能,瀑布流+自动加载 index13.html <!DOCTYPE html> <html> <head> <meta cha ...

  3. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

  4. 利用JS实现简单的瀑布流效果

    哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了 ...

  5. js图片瀑布流效果

    要实现图片瀑布流效果,首先得准备几张图片. html的部分比较简单就是将图片加载到浏览器就可以了 代码如下(注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果): <!DOCTYPE ...

  6. js 实现图片瀑布流效果，可更改配置参数 带完整版解析代码[waterFall.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...

  7. 使用JS实现图片展示瀑布流效果

    不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度 ...

  8. WPF下制作的简单瀑布流效果

    最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面 我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单. 1.最重要的 ...

  9. 用jQuery实现瀑布流效果学习笔记

    jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...

随机推荐

  1. MyEclipse10搭建Strust2开发环境

    一.创建一个JavaWeb项目 启动MyEclipse10    ,然后在MyEclipse中创建一个JavaWeb项目,点击[File]---->[New]---->[WebProjec ...

  2. FastDFS、nginx配置手记

    第一部分   FastDFS介绍 1.FastDFS是什么 FastDFS是一款类Google FS的开源分布式文件系统,它用纯C语言实现,支持Linux.FreeBSD.AIX等UNIX系统.它只能 ...

  3. PMP考试的过与只是

    我在一年多时间里參加了三次PMP考试,前两次都失败,直到第三次才成功.怎样对待失败?这是每个人都会遇到的挑战.假设我们能用正确的态度对待临时的失败,那么终于的成功也就不远了.我希望通过本文与大家分享一 ...

  4. Entity FrameWork 指导文章

    Entity FrameWork学习指导: 转:http://www.entityframeworktutorial.net/code-first/configure-many-to-many-rel ...

  5. Chapter 3 - How to Move a sprite

    http://www.eoeandroid.com/forum.php?mod=viewthread&tid=250529 http://www.cocos2d-x.org/boards/6/ ...

  6. 对于Maven管理的项目制定虚拟目录

    基于Maven管理的web项目结构: target目录是用来存放项目打包之后生成的文件的目录,此目录中的文件必须调用mvn clean package后才能生成, 如果把虚拟目录设置在此目录中,则每次 ...

  7. [学习笔记]设计模式之Bridge

    写在前面 为方便读者,本文已添加至索引: 设计模式 学习笔记索引 “魔镜啊魔镜,谁是这个世界上最美丽的人?”月光中,一个低沉的声音回荡在女王的卧室.“是美丽的白雪公主,她正和小霍比特人们幸福快乐地生活 ...

  8. WTL的消息机制

    Windows消息 众所周知,Windows消息有两种:队列话消息和非队列话消息.队列话消息是被Windows操作系统放入消息队列的,程序通过主消息循环不断的从消息队列中取出消息并分发到各自的窗体调用 ...

  9. 9张思维导图学习Javascript(转)

    思维导图小tips:思维导图又叫心智图,是表达发射性思维的有效的图形思维工具 ,它简单却又极其有效,是一种革命性的思维工具.思维导图运用图文并重的技巧,把各级主题的关系用相互隶属与相关的层级图表现出来 ...

  10. (转)C#中的泛型

    来源:http://www.cnblogs.com/JimmyZhang/archive/2008/12/17/1356727.html .Net 1.1版本最受诟病的一个缺陷就是没有提供对泛型的支持 ...