浏览网页的时候经常会遇到瀑布流布局的网站。也许有些读者不了解瀑布流。瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。比如下面图片的效果，就是一个典型的瀑布流。

网上有很多JQ的瀑布流插件，而且都写好了兼容，都可以尝试去使用，这里只是跟大家分享一下原生js实现瀑布流的效果，一起学习。

一步一步来：

首先新建一个文件，就叫瀑布流.html吧。

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>瀑布流</title>

    <style type="text/css">

    div{

        background: #ccc;

        width: 200px;

        position: absolute;

        transition:0.5s;

    }

    </style>

</head>

<body>

    <script>

        //js代码

    </script>

</body>

</html>

这里先说明一下，就像上面那张图片的布局一样，只不过里面的小图片我全部用div表示，每个div宽度（200px）都一样，跟上面的图片例子一样（高度可能不一样），然后将每一个div都绝对定位，因为在后面会通过left、top值改变div的位置。transition:0.5s;只是给div改变样式时一个过渡。

下面是JS代码部分：

<script type="text/javascript">

    createDiv ()

    function createDiv () {

        for (var i = 0; i < 20; i++) {

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

            var rnd = Math.floor(Math.random()*300+50)   //div的高度在50到350之间

            div.style.height = rnd + "px";

            div.innerHTML = i;

            document.body.appendChild(div);

        };

        change()

    }

    function change() {

        var aDiv = document.getElementsByTagName('div');

        // alert(aDiv.length);

        var windowCW = document.documentElement.clientWidth;  //窗口视口的宽度

        var n = Math.floor(windowCW/210);                     //一行能容纳多少个div，并向下取整

        if (n<=0) {return};

        // alert(n);

        var t = 0;

        var center = (windowCW - n*210)/2;                   //居中

        var arrH = [];                                       //定义一个数组存放div的高度

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

            var j = i%n;                                  

            if (arrH.length==n) {                    //一行排满n个后到下一行

                var min = findMin(arrH);              //从最“矮”的排起，可以从下图的序号中看得出来，下一行中序号是从矮到高排列的

                aDiv[i].style.left =center + min*210 + "px";

                aDiv[i].style.top = arrH[min]+10 + "px";

                arrH[min] += aDiv[i].offsetHeight + 10;

                // alert(min);

            }else{

                arrH[j] = aDiv[i].offsetHeight;

                aDiv[i].style.left =center + 200*j+10*j + "px";

                aDiv[i].style.top = 0;

            }

        };

    }

    window.onresize = function(){      //窗口改变也调用函数

        change();

    }

    window.onscroll= function  () {

        // 页面总高度

        var bodyHeight = document.documentElement.offsetHeight;

        // 可视区高度

        var windowHeight = document.documentElement.clientHeight;

        //滚动条的高度

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

        var srcollH = document.body.scrollHeight;

        // alert(srcollH);

        if (srcollTop+windowHeight  >= srcollH-20) {

            createDiv();

        };

    }

    function findMin(arr) {

    var m = 0;

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

        m = Math.min(arr[m], arr[i]) == arr[m] ? m : i;

    }

    return m;

}

</script>

把JS部分代码放在html文件下就完成了，你也可以将新建一个js文件。浏览器打开就会看到下面的效果：

               

注意看2张图片的滚动条，在第二张中已经生成了很多个div。随着滚动条的下滑div不断生成，这样就没必要将全部内容一下子显示出来，节省空间的同时也节省了流量。京东商城或是淘宝商品详细介绍也是下拉到该内容的时候才加载。

同时改变窗口大小也能自适应。

     

暂时分享到这里，如果对你有帮助就点个赞吧，不明白的地方留个言。本文是我原创的，所以有需要转载的读者麻烦说明一下出处，O(∩_∩)O谢谢。

//9月7号补充内容

今天做项目用到了瀑布流，就把今天写的效果和代码贴出来跟大家交流，写的不好的地方欢迎指出，只有学习才有进步。

　悬浮的时候有文字说明，同时透明背景过渡显示。还可以点击图片查看大图。

其实实现起来也很简单，时间有限我直接吧js部分代码拷贝下来。下班走人咯。

//瀑布流

var fall=document.getElementById("waterfall_ul");

createLi();

function createLi(){

    for (var i = 0; i < 40; i++) {

            var li = document.createElement('li');

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

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

            var span=document.createElement('span');

            // li.style.width="210px";

            fall.appendChild(li);

            li.appendChild(img);

            li.appendChild(div);

            div.appendChild(span);

            span.innerHTML="我是文字";

            div.setAttribute('class',"cover");

            img.setAttribute("src", "img/"+i+".jpg");

        };

}

function change(){

    var lis=fall.getElementsByTagName("li");

    var lis_W=lis[0].offsetWidth;

    // alert(lis_W);

    var imgs=fall.getElementsByTagName('img');

    // alert(imgs.length);

    var windowCW = document.documentElement.offsetWidth;

    var n = Math.floor(windowCW/lis_W); 

    var center = (windowCW - n*lis_W-(n-1)*10)/2;

    var arrH = [];

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

        var j=i%n;

        // alert(arrH);

        if (arrH.length==n) {

                var min = findMin(arrH);

                lis[i].style.left =center + min*(lis_W+10) +"px";

                lis[i].style.top = arrH[min]+10 + "px";

                arrH[min] += lis[i].offsetHeight + 10; 

                var k=0;

                for(var b=0;b<n;b++){

                    k=Math.max(arrH[k],arrH[b])==arrH[k] ? k : b;

                }

                fall.style.height= arrH[k]+'px';

                // alert(min);

            }else{

                arrH[j] = imgs[i].offsetHeight;

                lis[i].style.left =center + lis_W*j+10*j + "px";

                lis[i].style.top = 0;

            }

    }

    function findMin(arr) {

        var m = 0;

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

            m = Math.min(arr[m], arr[i]) == arr[m] ? m : i;

        }

        return m;

    }

}

window.onload=function(){

    change();

}

window.onresize=function(){

    change();

}

//点击查看图片大图

$(document).ready(function(){

    $(".cover").click(function(){

        // console.log(this.previousSibling.src);

        var cover_img=document.getElementById("cover_img");

        var big_cover=document.getElementById('big_cover');

        cover_img.setAttribute("src", this.previousSibling.src);

        big_cover.style.display="block";

    });

    $("#x").click(function(){

        big_cover.style.display="none";

    });

    $(".cover").hover(function() {

        /* Stuff to do when the mouse enters the element */

        $(this).animate({opacity:1});

    }, function() {

        /* Stuff to do when the mouse leaves the element */

        $(this).animate({opacity:0});

    });

});

完了，再次谢谢大家的读阅。

原生JS实现瀑布流的更多相关文章

  1. JavaScript——原生js实现瀑布流

    瀑布流介绍及实现原理: 瀑布流是一种页面布局,页面上也有多等宽的块(块就页面内容),每一块都是绝对定位(absolute),每个块排列的方式如下:寻找现在高度最小的列,把该块定位到该列下方.需要知道, ...

  2. 原生js实现瀑布流效果

    参考此篇:https://segmentfault.com/a/1190000012621936 以下为个人测试中: css: .masonry{ width:100%; } .item{ posit ...

  3. 用js实现瀑布流的一种简单方法

    现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...

  4. js实现瀑布流的一种简单方法实例分享

    现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...

  5. [JS练习] 瀑布流照片墙

    记录JS实现瀑布流照片墙效果 首先是前端页面 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. bootstrap+masonry.js写瀑布流

    最近在用bootstrap写一个网站,其中有个图文展示的页面要用到瀑布流的效果.因为项目要求,项目要以bootstrap为基准,不准私自添加内联样式.内部样式,所以,自己写瀑布流就不行了,所以,根据要 ...

  7. 多栏布局与JS实现瀑布流

    css3属性之多栏布局与JS实现瀑布流 背景:之前打算自己总结一下flex布局的知识点,发现自己无从下手,原因在何处:我反思了一下,其实原因很简单,使用的次数少,更多的时间使用了百分比,浮动和定位解决 ...

  8. js插件---瀑布流Masonry

    js插件---瀑布流Masonry 一.总结 一句话总结:还是要去看官网,比amazeui上面介绍的详细很多 1.瀑布流的原理是什么? 给外层套好相对定位,里面的每一个弄好绝对定位,然后计算出每一个的 ...

  9. vue.js实现瀑布流之vue-waterfall-easy

    想必大家应该很多都已经习惯了jquery的DOM操作,jquery的瀑布流实现起来也很容易. 但是,随着时代的发展,随着时代的进步..... 算了算了,扯远了,既然能找到这儿来,肯定是在vue.js上 ...

随机推荐

  1. 【转载】UEditor前端配置项说明

    UEditor 的配置项分为两类:前端配置项 和 后端配置项 后端配置项具体看这个文档L:后端配置项说明 本文档介绍如何通过设置前端配置项,定制编辑器的特性,配置方法主要通过修改ueditor.con ...

  2. A/B测试

    昨天把前段时间开发的二胡调音器的应用发布到了亚马逊应用程序商店,看到了一个A/B测试的标签,了解一下A/B测试的工作原理. A/B测试是一种新兴的网页优化方法,可以用于增加转化率注册率等网页指标. 使 ...

  3. 关于把本地应用封装成windows app发布审核通不过的问题

    把传统的b/s系统,简单改版,做成了一个比较适合于领导查询的系统,并开发了一个app程序封装了webview直接导向该程序,无需登陆直接访问:结果在提交app的时候审核通不过,问题是安全审核失败: 大 ...

  4. ViewPager中使用PhotoView时出现pointerIndex out of range异常

    问题描述: 当PhotoView 和 ViewPager 组合时 ,用双指进行放大时 是没有问题的,但是用双指进行缩小的时候,程序就会崩掉,并且抛出java.lang.IllegalArgumentE ...

  5. VS替换空行

    visual studio2012 改变了正则表达式的写法 因此原来的不管用了 Old: ^:b*$\n New: ^(?([^\r\n])\s)*\r?$\r?\n Click Ctrl-H (qu ...

  6. MVC4研发中遇到问题【持续总结....】

    第一: 编译器错误消息: CS0012: 类型“System.Data.Objects.DataClasses.EntityObject”在未被引用的程序集中定义.必须添加对程序集 “System.D ...

  7. 利用vba将excel中的图片链接直接转换为图片

    Sub test() Dim rg As Range, shp As Shape Rem --------------------------------------------------- Rem ...

  8. python-根据左右值获取城市区域编码

    def get_adcode(city): """ 根据城市获取区域编码 :param city: :return: """ db = db ...

  9. STM32 SPI DMA 的使用

    一是想总结一下SPI总线的特点与注意点,二是总结一下SPI DMA的使用 一.SPI信号线说明 通常SPI通过4个引脚与外部器件相连: MISO:主设备输入/从设备输出引脚.该引脚在从模式下发送数据, ...

  10. Windows CMD命令大全（转）

    Windows CMD命令大全   命令简介 cmd是command的缩写.即命令行 . 虽然随着计算机产业的发展,Windows 操作系统的应用越来越广泛,DOS 面临着被淘汰的命运,但是因为它运行 ...