效果图：

html代码实现网页布局：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>waterfall</title>

     <link rel="stylesheet" href="css/main.css">

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

 </head>

 <body>

 <div id="main">

     <div class="box">

         <div class="pic">

             <img src="data:images/img_1.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_2.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_3.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_4.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_5.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_6.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_7.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_8.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_9.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_10.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_11.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_12.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_13.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_14.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_15.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_16.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_17.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_18.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_19.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_20.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_21.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_22.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_23.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_24.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_25.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_26.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_27.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_28.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_29.jpg" alt="...">

         </div>

     </div>

     <div class="box">

         <div class="pic">

             <img src="data:images/img_30.jpg" alt="...">

         </div>

     </div>

 </div> 

 </body>

 </html>

css控制网页样式:

* {

    margin:;

    padding:;

}

.main {

}

.box {

    float:left;

    padding: 7px;

}

.pic img{

    width:300px;

    height: auto;

    border-radius: 5px;

}

其效果体验为：

1、当你滚动滚动条时（既鼠标下拉），网页图片会随着你的下拉不断的呈现出来源源不断（不是很多图片，是通过js让其以json的格式传递数据，然后然这些图片数据不断重复出现）。

2、图片等宽不等高，参差不齐，很有艺术感（文艺旅游相册网站），你懂的。

js实现瀑布流效果：

window.onload = function(){

    waterfall("main","box");

    var dataInt = {'data':[{"src":"img_1.jpg"},{"src":"img_2.jpg"},{"src":"img_3.jpg"},{"src":"img_4.jpg"},{"src":"img_5.jpg"},{"src":"img_6.jpg"},{"src":"img_7.jpg"},{"src":"img_8.jpg"},{"src":"img_9.jpg"},{"src":"img_10.jpg"},{"src":"img_11.jpg"},{"src":"img_12.jpg"},{"src":"img_13.jpg"},{"src":"img_14.jpg"},{"src":"img_15.jpg"},{"src":"img_16.jpg"},{"src":"img_17.jpg"},{"src":"img_18.jpg"},{"src":"img_19.jpg"},{"src":"img_20.jpg"},{"src":"img_21.jpg"},{"src":"img_1.jpg"},{"src":"img_22.jpg"},{"src":"img_24.jpg"},{"src":"img_25.jpg"},{"src":"img_26.jpg"},{"src":"img_27.jpg"},{"src":"img_28.jpg"},{"src":"img_29.jpg"},{"src":"img_30.jpg"}]}

    window.onscroll=function(){

        if(checkScrollSlide){

            var oParent = document.getElementById('main');

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

                var oBox = document.createElement('div');

                oBox.className='box';

                oParent.appendChild(oBox);

                var oPic = document.createElement('div');

                oPic.className='pic';

                oBox.appendChild(oPic);

                var oImg = document.createElement('img');

                oImg.src="data:images/"+dataInt.data[i].src;

                oPic.appendChild(oImg);

            }

            waterfall("main","box");

        }

    }

}

function waterfall(parent, box){

    var oParent = document.getElementById(parent);

    var oBoxs = getByClass(oParent,box);

    var oBoxw = oBoxs[0].offsetWidth;

    var cols = Math.floor(document.documentElement.clientWidth/oBoxw);

    oParent.style.cssText = "width:"+oBoxw*cols+"px;margin: 0 auto";

    var hArr = [];

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

        if(i<cols){

            hArr.push(oBoxs[i].offsetHeight);

        }else{

            var minH = Math.min.apply(null, hArr);

            var index = getMinhIndex(hArr,minH);

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

            oBoxs[i].style.top=minH+"px";

            oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';

            hArr[index] += oBoxs[i].offsetHeight;

        }

    }

}

function getByClass(parent, clsName){

    var boxArr = new Array(),

        oElements = parent.getElementsByTagName('*');

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

        if(oElements[i].className==clsName)

            boxArr.push(oElements[i]);

    }

    return boxArr;

}

function getMinhIndex(arr, val){

    for(var i in arr){

        if(arr[i]==val){

            return i;

        }

    }

}

function checkScrollSlide (){

    var oParent = document.getElementById(parent);

    var oBoxs = getByClass(oParent,box);

    var lastBoxH = oBoxs[oBox.length-1].offsetTop;

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

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

    return (lastBoxH<scrollTop+height)?true:false;

}

js实现网页瀑布流布局的更多相关文章

  1. js网页瀑布流布局

    瀑布流布局思路: 1.css样式,图片的父级div样式设置为定位或者浮动 2.找出图片父级元素(box)和最外元素(main):获取box的宽度和main的宽,然后计算main容器一行能容纳多少个bo ...

  2. 网页瀑布流布局插件Masonry

    CSS3有实现类似瀑布流布局的属性column,但是遗憾的是这种布局是纵向布局而不支持横向布局.所以比较合适用于文字多列布局. 调用JQuery WaterFall布局插件:http://masonr ...

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

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

  4. JS原生效果瀑布流布局的实现(一)

    JS原生效果 实现: HTML页面布局: <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu ...

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

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

  6. 纯js实现瀑布流布局及ajax动态新增数据

    本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...

  7. JS案例之6——瀑布流布局(1)

    在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...

  8. JS 瀑布流布局

    瀑布流布局 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  9. JS瀑布流布局模式(1)

    在实际的项目中,偶尔会用到一种布局——瀑布流布局.瀑布流布局的特点是,在多列布局时,可以保证内容区块在水平方向上不产生大的空隙,类似瀑布的效果.简单的说,在垂直列表里,内容区块是一个挨着一个的.当内容 ...

随机推荐

  1. 全面解读python web 程序的9种部署方式

    转载自鲁塔弗的博客,本文地址http://lutaf.com/141.htm  python有很多web 开发框架,代码写完了,部署上线是个大事,通常来说,web应用一般是三层结构 web serve ...

  2. AlwaysOn--Backup Preference

    AlwaysOn group的一个新特性是允许在secondary replica进行backup,将backup的负载从primary replica上移除去. 并且提供了Backup prefer ...

  3. 职责链(Chain of Responsibility)模式在航空货运中的运用实例

    设计模式这东西,基本上属于“看懂一瞬间,用会好几年”.只有实际开发中,当某一模式很好的满足了业务需求时,才会有真切的感觉.借用一句<闪电侠>中,绿箭侠教导闪电侠的台词:“不是你碰巧遇到了它 ...

  4. ImageMagick常用指令详解

    Imagemagick常用指令 (ImageMagick--蓝天白云) (ImageMagick官网) (其他比较有价值的IM参考) (图片自动旋转的前端实现方案) convert 转换图像格式和大小 ...

  5. Eclipse工作常见问题总结

    一.Eclipse常见快捷键使用 自动完成单词:Alt+/ 重命名:Shift+Alt+r(统一改变字段或方法名) 生成getter/setter方法: Shift+Alt+s,然后r 删除当前行:C ...

  6. （译文）MVC通用仓储类

    Generic Repository Pattern MVC Generic Repository Pattern MVC 原文链接:http://www.codeproject.com/Articl ...

  7. Java语法笔记

    目录 知识点 不支持 恶心事 与C#的区别 组件 学习资料 母版页 知识点 类 静态方法,即可以在类上被调用,也可以在实例对象上被调用. Java类 先执行静态构造函数,再执行静态方法或静态字段,所以 ...

  8. 给菜单加个优雅的unselect事件

    先上图,说场景 假设默认选中的是item1,我现在选中item3了,有时候需要对item1做一些别的处理.常见的做法是,切换选中状态前找到当前选中(item1),或者每次选中后选中的项记录在中间变量. ...

  9. linux基础-第十五单元 软件包的管理

    使用RPM安装及移除软件 什么是RPM rpm的文件名 rpm软件安装与移除工作中经常使用的选项 查看RPM软件包中的信息 查询已安装的软件包信息 RPM包的属性依赖性问题 什么是RPM包的属性依赖性 ...

  10. 枚举型Enum和结构型Stuct

    枚举型实质就是使用符号来表示的一组相互关联的数据. Season currentSeason,nextSeason; currentSeason = Season.Spring; nextSeason ...