效果图：

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. k-d tree 学习笔记

    以下是一些奇怪的链接有兴趣的可以看看: https://blog.sengxian.com/algorithms/k-dimensional-tree http://zgjkt.blog.uoj.ac ...

  2. Hibernate总结4之HQL

    一,HQL特点 与SQL相似,SQL中的语法基本上都可以直接使用. SQL查询的是表和表中的列:HQL查询的是对象与对象中的属性. HQL的关键字不区分大小写,类名与属性名是区分大小写的. SELEC ...

  3. Android -- ActivityLifeCycleCallbacks

    ActivityLifeCycleCallbacks Application通过此接口提供了一套回调方法,用于让开发者对Activity的生命周期事件进行集中处理. 为什么用ActivityLifec ...

  4. struts2 访问Web元素的4种方法

    完整代码 :Struts12AccessWebElement.rar 第一种也是最常用的一种方法实现这几个接口 RequestAware,SessionAware,ApplicationAware s ...

  5. STM32-外部中断，没有硬件干扰就是快乐

    一:触发方式 STM32 的外部中断是通过边沿来触发的,不支持电平触发: 二:外部中断分组 STM32 的每一个GPIO都能配置成一个外部中断触发源,STM32 通过根据引脚的序号不同将众多中断触发源 ...

  6. 一起写一个JSON解析器

    [本篇博文会介绍JSON解析的原理与实现,并一步一步写出来一个简单但实用的JSON解析器,项目地址:SimpleJSON.希望通过这篇博文,能让我们以后与JSON打交道时更加得心应手.由于个人水平有限 ...

  7. HTML5+JS 《五子飞》游戏实现（一）规则

    很久没写文章了,这个游戏其实已经写了有段时间了,一直没有完善,赶在新年之际,分享给大家. 该<五子飞>游戏,不是平常大家所说的<五子棋>,这个玩法简单,是我们老家儿时常玩的一种 ...

  8. HTML5+JS 《五子飞》游戏实现（五）移动棋子

    上一章 我们知道了怎么处理两个重要的吃棋动作,想要吃对方的棋子,首先得移动自己的棋子.现在里沃特跟大家分享分享,怎么移动棋子. 想要移动棋子,在页面上,首先要点击一下要移动的棋子,然后再点击一下目标位 ...

  9. 自己存档：ajax 动态提交form

    $.ajax({                    cache: true,                    type: "POST",                  ...

  10. 谈谈关于Python里面小数点精度控制的问题

    基础 浮点数是用机器上浮点数的本机双精度(64 bit)表示的.提供大约17位的精度和范围从-308到308的指数.和C语言里面的double类型相同.Python不支持32bit的单精度浮点数.如果 ...