<!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. 当心回车符破坏你的JSON数据

    今天发现系统中一个地方获取JSON数据时,时而失败,时而成功,最后发现是回车符搞的鬼. 当你的JSON中有回车符时,会致使你的JSON出现格式错误:解决办法是在保存数据,或整理数据向客户端输出时将回车 ...

  2. [iOS微博项目 - 2.1] - 获得新浪授权接口

    A.如何获得新浪的授权接口 登陆新浪的开放平台 注册新浪账号 创建应用 获得应用id和请求地址 查阅相关API 关联需要进行测试的账号   1.登陆开放平台 http://open.weibo.com ...

  3. [iOS UI进阶 - 6.2] 核心动画CoreAnimation 练习代码

    A.基本用法 1.CABasicAnimation // // ViewController.m // CoreAnimationTest // // Created by hellovoidworl ...

  4. 系统级性能分析工具 — Perf

    从2.6.31内核开始,linux内核自带了一个性能分析工具perf,能够进行函数级与指令级的热点查找. perf Performance analysis tools for Linux. Perf ...

  5. Unity3D之Mecanim动画系统学习笔记（十一）：高级功能应用

    动作游戏 还记得读书的时候熬夜打<波斯王子>的时光,我们的王子通过跳跃穿过墙壁的小洞.在高层建筑上进行攀爬和跳跃,还有在操作失误掉下高楼和触发必死机关后使用时之沙的时光倒流功能回归死亡之前 ...

  6. NHibernate - ICriteria 查询

    http://blog.knowsky.com/213234.htm http://blog.chinaunix.net/uid-20463341-id-1673509.html http://www ...

  7. xmlBean学习二

    由上一遍的准备工作完成后,可以很简单的就进行对xml文件的操作, package com; import java.io.File; import java.io.IOException; impor ...

  8. CF:322D - Ciel and Duel 贪心 或者 DP 我用的贪心 。。难道sort跟qsort是不一样的么？

    D. Ciel and Duel time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  9. 单例模式总结（Java版）

    1:懒汉的设计模式,在第一次调用的时候才完成相关的初始化操作 懒汉式是典型的时间换空间,就是每次获取实例都会进行判断,看是否需要创建实例,浪费判断的时间.当然,如果一直没有人使用的话,那就不会创建实例 ...

  10. 解决ccSvcHst.exe CPU占用超50%的问题，及其缘由

    无意中发现任务管理器中一个非常奇特的进程,迅速吃掉了我50%的cpu资源,并且是持续性的,于是上google一番查找,终于有了新的发现. 非常多问答产品所有都是清一色的 错误解决方式: 正常情况下,系 ...