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. 通过rest接口获取自增id (twitter snowflake算法)

    1.  算法介绍 参考 http://www.lanindex.com/twitter-snowflake%EF%BC%8C64%E4%BD%8D%E8%87%AA%E5%A2%9Eid%E7%AE% ...

  2. JSP版（utf8编码）的Ueditor百度文章编辑器配置以及使用说明

    二话不说,先上图: 我配置好的效果大致是这些功能:基本的文字编辑功能.图片上传功能.附件上传功能.百度/谷歌地图搜索截图.视/音频发布功能.这个插件是现今我用过觉得最舒服的编辑器,功能齐全强大,稍微修 ...

  3. win8笔记本无法搜索wifi信号找不到WLAN该 wifi共享特别注意的服务

    WlansvcWLAN AutoConfigWLANSVC 服务提供配置.发现.连接.断开与 IEEE 802.11 标准定义的无线局域网(WLAN)的连接所需的逻辑.它还包含将计算机变成软件访问点的 ...

  4. 模板引擎 Velocity

    模板引擎 Velocity 一.Velocity简介: Velocity是一个基于java的模板引擎(template engine).它允许任何人仅仅简单的使用模板语言(template langu ...

  5. HDU 1242 rescue and 优先级队列的条目

    Problem Description Angel was caught by the MOLIGPY! He was put in prison by Moligpy. The prison is ...

  6. java final keyword

    依据上下文环境,java的keywordfinal也存在着细微的差别,但通常指的是“这是无法改变的.”不想改变的理由由两种:一种是效率,还有一种是设计.因为两个原因相差非常远,所以关键子final可能 ...

  7. WPF仿微软事件和属性窗体，效果更炫！

    先看效果图:包含系统颜色.系统字体.支持自定义编辑窗体.集合绑定.提供多类型支持. 这是国外网站上无意中看到的,修改了下   感觉还不错!接下来大概介绍下 经过修修改改只留下了有用的主要部分: 前两项 ...

  8. mvvm框架下页面与ViewModel的各种参数传递方式

    传单个参数的话在xaml用     Command={Binding ViewModel的事件处理名称}    CommandParameter={Binding 要传递的控件名称} ViewMode ...

  9. WTL 自定义 Button类-自绘

    WTL 自绘Button类,支持按钮三种形态,正常模式,hover模式,鼠标按下模式,支持png图片.使用方法很简单: MyButton* pButton = new MyButton;   pBut ...

  10. modelsim命令行仿真提示“vsim 不是内部或外部命令，也不是可运行的程序或批处理文件”的解决办法

    安装完modelsim后,用过命令行模式仿真,如“vsim -c -do run.do”,开始时是可以的. 后来偶然再用该仿真方式,发现命令行提示“vsim 不是内部或外部命令,也不是可运行的程序或批 ...