<!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 1679 http://poj.org/problem?id=1679

    http://poj.org/problem?id=1679 The Unique MST Time Limit: 1000MS   Memory Limit: 10000K Total Submis ...

  2. [iOS基础控件 - 6.10.7] UIWindow

    A.UIWindow概念 1.继承UIView,是一种特殊的UIView 2.通常一个APP只有一个UIWindow 3.iOS程序启动后,创建的第一个视图就是UIWindow 4.没有UIWindo ...

  3. 转载Repository 和Unit of work的使用说明

    利用Repository and Unit of Work重构项目 文章索引和简介 项目最基础的东西已经结束了,但是现在我们的项目还不健全  不利于测试 重复性代码多   层与层之间耦合性高  不利于 ...

  4. python登录csdn并自动评论下载资源脚本

    功能 1.自动登录csdn 2.查找未评论的资源并自动评论 用到的库 1.python自带的requests,获取以及发送网页数据 2.python自带的time,用作休眠,csdn资源一段时间内只允 ...

  5. 关于H-Fox 函数

    ........We arrive at the following results which provide the sine and cosine transforms of the H-fun ...

  6. .NET通用权限系统快速开发框架

    DEMO下载地址: http://download.csdn.net/detail/shecixiong/5372895 一.开发技术:B/S(.NET C# ) 1.Windows XP以上 (支援 ...

  7. PostgreSQL的initdb 源代码分析之六

    继续分析 下面的是获取运行此程序的用户名称,主要还是为了防止在linux下用root来运行的情形. effective_user = get_id(); ) username = effective_ ...

  8. JSP/ Servlet常见的中文乱码原因

    在开发中,我们经常遇到中文乱码的问题,比方: &浏览器中看到的 Jsp/Servlet 页面中的汉字成了 '?' ?  &浏览器中看到的 Servlet 页面中的汉字都成了乱码  &a ...

  9. 硝烟中的scrum学习笔记 - 怎样制定Sprint计划(Plan Meeting)

    1. 如何估算我们这个sprint能做多少个故事点 1) 本能反应 2) 生产率计算  估算生产率/实际生产率  看看团队的历史,看看他们在过去几个sprint里的生产率是多少  然后假定在下一个sp ...

  10. Java和C#在面向对象上语法的区别

    做了几年了开发一直没有总结什么,回到了家乡的小城做了一名培训班的教员,教授软件开发的知识.细小的知识从头细细嚼来,别有一番滋味.或是以前遗漏的太多,或是确实没有系统的学习过,教学生的过程中自己也对教材 ...