<!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. poj 3180 The Cow Prom（强联通分量）

    http://poj.org/problem?id=3180 The Cow Prom Time Limit: 1000MS   Memory Limit: 65536K Total Submissi ...

  2. jquery easyui防止超出浏览器边界

    var easyuiPanelOnMove=function(left,top){ if(left<0){ $(this).window('move',{ left:1 }); } if(top ...

  3. WinAPI: FindWindow、FindWindowEx - 查找窗口

    FindWindow(   lpClassName,        {窗口的类名}   lpWindowName: PChar {窗口的标题} ): HWND;              {返回窗口的 ...

  4. mount nfs的可选参数

    mount nfs的可选参数:HARD mount和SOFT MOUNT:HARD:NFS CLIENT会不断的尝试与SERVER的连接(在后台,不会给出任何提示信息,在LINUX下有的版本仍然会给出 ...

  5. MPAndroidChart

    该库的可扩展性强,代码相对规范,最近一次更新有很大改进,如果不喜欢AChartEngine的过于复杂可以考虑在此库的基础上开发自己的图表类. linechart 填充式lineChart 单条线的Li ...

  6. ADO.NET 快速入门（二）：执行命令

    Commands发出针对数据库的数据存储动作.例如,你可以执行一条命令插入或者删除数据.获取更多从数据库移动数据相关的信息,请参考“Update a Database from a DataSet”. ...

  7. PHP+MySQL多语句执行<转自wooyun>

    发起这个帖子,估计就很多人看到题目就表示不屑了.一直以来PHP+MySQL环境下,无论是写程序或者是注入攻击,是无法多语句执行的,这么广为人知的常识,没理由会有人不知道.可权威就是用来被挑战的,常识也 ...

  8. synchronized(this) 和synchronized(xxx.class)的区别和联系

    synchronized(ThreadTest.class)是对ThreadTest这个类进行加锁,类里面的属性,方法都是同步的,是针对于特定的类的~~ synchronized(this){}是对{ ...

  9. python的一些总结3

    好吧 刚刚的2篇文章都很水.. 这篇 也是继续水 在 templates 右键新建 html 文件:如 index.html (输入以下代码) <!DOCTYPE html> <ht ...

  10. 设计模式六大原则——合成/聚合复用原则(CARP)

    1.定义 简而言之,对于合成/聚合复用原则的定义就是:要尽量使用合成和聚合,尽量不要使用继承. 2.释义 为什么"要尽量使用合成和聚合.尽量不要使用继承"呢? 这是由于: 第一,继 ...