<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>瀑布流</title>

    <link rel="stylesheet" type="text/css" href="css/style.css">

    <script src="js/app.js"></script>

</head>

<body>

<div id ="container">

    <div class="box">

          <div class="box_img" >

            <img src=".idea\img\2.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img" >

            <img src=".idea/img/3.jpg">

        </div>

    </div>

    <div class="box">

        <div class=" box_img">

            <img src=".idea/img/9b7f759c4c0d6a4187b2902f33386e27.jpg">

        </div>

    </div>

    <div class="box">

        <div  class="box_img" >

            <img src=".idea/img/857ae43b321476e94252fad082292cce.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img" >

            <img src=".idea/img/14934c7fd0a6ea3a2272c8dd05ebe0a2.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img" >

            <img src=".idea/img/20140821101515614.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img">

            <img src=".idea/img/20140821101516903.jpg">

        </div>

    </div>

<div class="box">

    <div class="box_img">

        <img src=".idea/img/资源1.jpg">

    </div>

</div>

    <div class="box">

        <div class="box_img">

            <img src=".idea/img/738b4710b912c8fc5d56e46cf8039245d78821ed.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img">

            <img src=".idea/img/48540923dd54564ee758fb98b7de9c82d1584f55.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img">

            <img src=".idea/img/u=4136129481,4024516763&fm=21&gp=0.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img" >

            <img src=".idea\img\2.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img">

            <img src=".idea/img/20140821101516903.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img">

            <img src=".idea/img/资源1.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img">

            <img src=".idea/img/738b4710b912c8fc5d56e46cf8039245d78821ed.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img">

            <img src=".idea/img/48540923dd54564ee758fb98b7de9c82d1584f55.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img">

            <img src=".idea/img/u=4136129481,4024516763&fm=21&gp=0.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img" >

            <img src=".idea\img\2.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img" >

            <img src=".idea/img/3.jpg">

        </div>

    </div>

    <div class="box">

        <div class=" box_img">

            <img src=".idea/img/9b7f759c4c0d6a4187b2902f33386e27.jpg">

        </div>

    </div>

    <div class="box">

        <div  class="box_img" >

            <img src=".idea/img/857ae43b321476e94252fad082292cce.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img" >

            <img src=".idea/img/14934c7fd0a6ea3a2272c8dd05ebe0a2.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img" >

            <img src=".idea/img/20140821101515614.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img">

            <img src=".idea/img/20140821101516903.jpg">

        </div>

    </div>

    <div class="box">

        <div  class="box_img" >

            <img src=".idea/img/857ae43b321476e94252fad082292cce.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img" >

            <img src=".idea/img/14934c7fd0a6ea3a2272c8dd05ebe0a2.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img" >

            <img src=".idea/img/20140821101515614.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img">

            <img src=".idea/img/20140821101516903.jpg">

        </div>

    </div>

</div>

</body>

</html>

js代码：

/**

 * Created by Administrator on 2015/5/23.

 */

window.onload=function() {

    imgLocation("container", "box");

    var imgDate={"date":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"资源1.jpg"},{"src":"9b7f759c4c0d6a4187b2902f33386e27.jpg"},{"src":"738b4710b912c8fc5d56e46cf8039245d78821ed.jpg"}]}

    window.onscroll = function () {

        if( checkFlag()) {

            var cparent = document.getElementById("container");

            for (var i = 0; i < imgDate.date.length; i++) {

                var ccontent = document.createElement("div");

                ccontent.className = "box";

                cparent.appendChild(ccontent);

                var boximg = document.createElement("div");

                boximg.className = "box_img";

                ccontent.appendChild(boximg);

                var img = document.createElement("img");

                img.src = ".idea/img/" + imgDate.date[i].src;

                boximg.appendChild(img);

            }imgLocation("container", "box");

        }

    }

}

function checkFlag() {

    var cparent = document.getElementById("container");

    var ccontainer = getChildElemtent(cparent, "box");

    var lastContentHeight = ccontainer[ccontainer.length - 1].offsetTop;

    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

    var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;

    if (lastContentHeight<scrollTop+pageHeight){

        return true;

    }

}

function imgLocation(parent,content) {

    var cparent = document.getElementById(parent);

    var ccontent = getChildElemtent(cparent, content);

    var imgWidth = ccontent[0].offsetWidth;

    var num = Math.floor(document.documentElement.clientWidth / imgWidth);

    cparent.style.cssText = "Width:" + imgWidth * num + "px;margin:0 auto";

    var boxHeightArr = [];

    for (var i = 0; i < ccontent.length; i++) {

        if (i < num) {

            boxHeightArr[i] = ccontent[i].offsetHeight;

        } else {

            var minheight = Math.min.apply(null, boxHeightArr);

            var minIndex=getminheightLocation(boxHeightArr,minheight);

            ccontent[i].style.position = "absolute";

            ccontent[i].style.top=minheight + "px";

            ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";

            boxHeightArr[minIndex]=boxHeightArr[minIndex]+ccontent[i].offsetHeight;

        }

    }

}

function getminheightLocation(boxHeightArr,minheight){

    for( var i in boxHeightArr)if (boxHeightArr[i] == minheight) {

        return i;

    }

}

function getChildElemtent(parent,content){

    var contentArr=[]

    var allcontent=parent.getElementsByTagName("*");

    for(var i = 0;i<allcontent.length;i++){

        if(allcontent[i].className==content) {

            contentArr.push(allcontent[i]);

        }

    }

    return contentArr

}

css代码：

*{

    margin: 0px;

    padding: 0px;

}

#container{

position: relative;

}

.box{

    padding: 5px;

    float:left ;

}

.box_img{

    padding: 5px;

    border: 1px;

    solid-color: #cccccc;

    box-shadow: #cccccc 0 0 5px;

    border-radius: 5px;

}

.box_img img{

    height:auto;

    width:150px

}

还是学生，写的可能都比较小白。

不过还是希望有个地方可以记录我的学习路径啦

以后写出的东西就放这里啦。

html代码：

原生js 实现的瀑布流的更多相关文章

  1. jquery/原生js/css3 实现瀑布流以及下拉底部加载

    思路: style: <style type="text/css"> body,html{ margin:; padding:; } #container{ posit ...

  2. 原生 JS 实现一个瀑布流插件

    更好的阅读体验,点击 原文地址 瀑布流布局中的图片有一个核心特点 -- 等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest.花瓣网等等.那么接下来就基于这个特点开始瀑布流探 ...

  3. JS实现动态瀑布流及放大切换图片效果(js案例)

    整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击 ...

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

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

  5. 用原生JavaScript实现图片瀑布流的浏览效果

    学习JS,活跃思维,灵活运用的一个较为典型的学习案例.同一个瀑布流的效果但实现方式却很多,利用递归.冒泡等等手法都可以达到你想要的目的.这次要说的就是利用类似递归来实现此效果的原创方案.此方案个人认为 ...

  6. 原生js实现图片瀑布流布局，注释超详细

    完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  7. 原生js实现的瀑布流布局

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 分享：纯 css 瀑布流 和 js 瀑布流

    分享一次纯 css 瀑布流  和 js 瀑布流 纯 css 写瀑布流 1.multi-columns 方式: 通过 Multi-columns 相关的属性 column-count.column-ga ...

  9. 关于瀑布流的布局原理分析（纯CSS瀑布流与JS瀑布流）

    瀑布流 又称瀑布流式布局,是比较流行的一种网站页面布局方式.即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置. 为什么使用瀑 ...

随机推荐

  1. jquery easyui将form表单元素的值序列化成对象

    function serializeObject(form){ var o={}; $.each(form.serializeArray(),function(index){ if(o[this['n ...

  2. codeforces 653A Bear and Three Balls

    A. Bear and Three Balls time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  3. Local host name unknown: java.net.UnknownHostException:

    在Linux下安装完resin后,每次启动都出现如下错误: [11:06:45.617] {watchdog-} WatchdogProcess[Watchdog[],7] starting Resi ...

  4. [转]Oracle关于null的处理

    转至:http://www.2cto.com/database/201209/157606.html 关于空值null的排序问题   Oracle排序中NULL值处理的五种常用方法:    1.缺省O ...

  5. Weblogic安装

    1.下载wls_121200.jar, 2.输入cnd打开命令提示 3.f:进入F盘 4.Java -version 验证是否配置Java环境, 5.echo %path% 查看环境变量 6.set ...

  6. 剑指OFFER之用两个栈实现队列（九度OJ1512）

    题目描述: 用两个栈来实现一个队列,完成队列的Push和Pop操作.队列中的元素为int类型. 输入: 每个输入文件包含一个测试样例.对于每个测试样例,第一行输入一个n(1<=n<=100 ...

  7. CSS基础(02)

    CSS 选择器 1.CSS3 选择器简介 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 语法: 下面中"CSS" 列指示该属性是在哪个 CSS 版本中定义的.(C ...

  8. ADO.NET 快速入门（十二）：从 SQL Server 生成 XML 数据

    本文演示如何使用2种不同的方法从 SQL Server 生成 XML.   方法1:使用了 SqlCommand 的 ExecuteXmlReader 方法获取 XmlReader,然后使用 Data ...

  9. 正则表达式从右往左进行匹配（Regex）

    #匹配最末两位为数字 $x=New-Object regex ('\d{2}','RightToLeft') #$x.RightToLeft $x.Match('abcd22') 结果:

  10. Struts2内建校验器（基于校验框架的文件校验）

    位于xwork-2.0.4.jar压缩包中( com.opensymphony.xwork2.validator.validators)有个文件default.xml ,该文件中定义了Struts2框 ...