瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。

1、首先瀑布流所有的图片应该保持宽度一致，高度是由内容决定。

通过定位的方式是我们实现瀑布流的最基本的原理，只要我们动态的设置它的top值、left值，就能让它排列。

2、定位后确定浏览器显示区域内，一行能放多少列图片盒子。

  • 获取页面的宽度
  • 获取图片盒子的宽度
  • 显示的列数 = 页面宽度/图片盒子宽度
  • column = pageWidth / itemWidth

3、为了美观我们可以加上一个空隙

  • 显示的列数 = 页面宽度/(图片盒子宽度+间隙);
  • column = pageWidth / (itemWidth + gap);

4、 确定列数之后，排列第一行

  • 下面还有很多图片盒子，我们先要排列第1行，所以在for循环里就要判断一下，当i(所有图片盒子的索引) < column(显示列数)的时候，说明在第1行；
  • 知道在第1行之后，动态设置每个图片盒子的left值就能排好第1行。
  • left = i * ( itemWidth + gap );

5、第1行排列好之后，获取第1行所有图片盒子的高度

  • 需要定义一个数组arr，将获取到的高度存在数组中，因为第2行排列的时候需要考虑top值，此时只能根据第1行图片盒子的高度来设置；
  • 获取图片高度的时候要注意，程序必须写在入口函数onload里面，因为图片的加载特性是：等页面都加载完之后才去请求加载，所以不写在入口函数里可能会出现高度获取不到的情况。

6、排列第2行

  • 获取到刚刚数组中，高度最小的那一列，将第2行的第1个图片盒子放置在它的下方；
  • 此时的left值就是高度最小列的offsetLeft；top值就是：第1行高度最小列的高度(为了布局美观可以加上上下间隙gap)。
  • 记录下高度最小列的索引index，后面计算会用到；
  • 设置完成之后，会发现后面所有的图片都叠在这个高度最小列的下面，原因就是此时的最小列高度没有改变，应该加上下面图片的高度，得出一个新高度。

7、改变最小列当前高度

  • 此时的这一列高度其实已经发生改变了，所以需要将新高度赋值给数组
  • 当前高度最小列的高度 = 当前高度最小列的高度 + 间隙 + 下面图片盒子的高度

8、触发resize事件

  • 将整个设置样式的部分封装成一个函数，在onload里面注册一个resize事件，只要页面一发生改变，就触发样式部分的代码。
  • 实时改变pageWidth的宽度，这样瀑布流就会是一个响应式的效果了

9、懒加载效果

  • 目前我们用的是30张图片，假如一个页面中有几百张图片的时候，我们不可能等到它都加载完再显示，所有这里引入一个懒加载的概念，我们规定第30张为显示的最后一张图片，当滚动条滚动到30张的时候，应该加载下一批图片。
  • 即页面可视区高度+滚动条卷去的高度 = 第30图片的offsetTop；的时候加载下面的图片。

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>瀑布流</title>

    <link rel="stylesheet" type="text/css" href="../css/flow.css">

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

    <script type="text/javascript" src="../js/script.js"></script>

</head>

<body>

    <div id="main">

        <div class="box">

            <div class="pic">

                <img src="../img/food-list1.png">

            </div>

        </div>

        <div class="box">

            <div class="pic">

                <img src="../img/food-list2-1.png">

            </div>

        </div>

        .

                .

                .

        <div class="box">

            <div class="pic">

                <img src="../img/food-list2-2.png">

            </div>

        </div>

        <div class="box">

            <div class="pic">

                <img src="../img/food-list2-3.png">

            </div>

        </div>

    </div>

</body>

</html>

html部分

 
css部分
 
window.onload=function(){

    waterfall("main","box");

    var dataInt={"data":[{"src":"food-list2-1.png"},{"src":"food-list2-2.png"},{"src":"food-list2-3.png"},{"src":"food-list2-4.png"},{"src":"food-list1.png"}]};

    window.onscroll=function(){

        if(checkScrollSlide()){

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

            for(let 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="../img/"+dataInt.data[i].src;

                oPic.appendChild(oImg);

            }

            waterfall("main","box");

        }

    }

}

function waterfall(parent,box){

    //获取main下所有class为box的元素

    var oParent=document.getElementById(parent);

    var oBoxs=getByClass(oParent,box);

    //获取列数

    var oBoxW=oBoxs[0].offsetWidth;

    // console.log(document.documentElement.clientWidth)

    var cols=parseInt(screen.availWidth/oBoxW);

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

    var hArr=[];//存放每列图片高度

    for(let 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=oBoxW*index+'px';

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

        }

    }

}

//根据class获取元素

function getByClass(parent,clsName){

    var boxArr=[];

    var oElements=parent.getElementsByTagName('*');

    for(let item of oElements){

        if(item.className==clsName){

            boxArr.push(item)

        }

    }

    return boxArr;

}

function getMinhIndex(arr,val){

    for (var i in arr) {

        if(arr[i]==val)

            return i;

    }

}

//检测是否具备滚动加载数据块的条件

function checkScrollSlide(){

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

    var oBoxs=getByClass(oParent,'box');

    var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+parseInt(oBoxs[oBoxs.length-1].offsetHeight);

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

    var totalH=scrollTop+document.documentElement.clientHeight;

    return (lastBoxH<=totalH)?true:false;

}

js部分

效果图：

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

  1. 原生JS实现瀑布流

    浏览网页的时候经常会遇到瀑布流布局的网站.也许有些读者不了解瀑布流.瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数 ...

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

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

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

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

  4. js网页瀑布流布局

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

  5. JS原生方法实现瀑布流布局

    html部分(图片都是本地,自己需要改动图片) p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec ...

  6. js实现瀑布流布局

    window.onload = function () { var d1 = new Waterfall(); d1.init();};//构造函数function Waterfall() { thi ...

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

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

  8. jquery/原生js/css3 实现瀑布流以及下拉底部加载

    思路: style: <style type="text/css"> body,html{ margin:; padding:; } #container{ posit ...

  9. JS 瀑布流布局

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

随机推荐

  1. noip模拟【ping】

    70:很容易想到的是枚举每一个可能的答案来判断是否可行,取最优即可,贪心选择. 100:满足题目条件的这个距离是满足单调性的.如果x不行,那么大于x的距离都不行,二分答案. 学会运用二分,by ws_ ...

  2. HDU 1689 Just a Hook （线段树区间更新+求和）

    Just a Hook Problem Description In the game of DotA, Pudge's meat hook is actually the most horrible ...

  3. 最小二乘法拟合非线性函数及其Matlab/Excel 实现

    1.最小二乘原理 Matlab直接实现最小二乘法的示例: close x = 1:1:100; a = -1.5; b = -10; y = a*log(x)+b; yrand = y + 0.5*r ...

  4. .net Core 2.1 后 Session保存，新页面获取不到值

    https://blog.csdn.net/kuui_chiu/article/details/81060051 https://blog.csdn.net/niunan/article/detail ...

  5. Cisco 2960交换机配置

    一. 基本操作 Switch(config)#hostname test01(交换机名称) //全局模式下修改交换机名称 Switch(config)#enable secret 123456 //全 ...

  6. Microsoft.EntityFrameworkCore.Sqlite的学习

    SQLite in ASP.NET Core with EntityFrameworkCore ASP.NET Core 2: Using SQLite as a light weight datab ...

  7. cmd中utf-8编码的问题

    有时候我们需要使用cmd显示某个utf-8编码的文本,这时候就需要设置cmd的代码页为65100. 也就是 chcp 65001 这条命令.这样设置可以临时生效. 如何要永久生效,需要在注册表中修改. ...

  8. 3、Python编程之MySQLdb模块(0602)

    解释器环境与选项 python解释器启动 python [options] [ -c cmd | filename | - ] [ args ] python解释器环境变量 python代码的测试.调 ...

  9. 【Python】【jupyter-notebook】

    1. win7 安装:https://www.cnblogs.com/zlslch/p/6984403.html 1.Jupyter Notebook 和 pip   为了更加方便地写 Python ...

  10. 【BZOJ】3572: [Hnoi2014]世界树

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3572 算是细节题了吧.. 构出虚树,考虑z正反DP两次求出虚树中每个点最近的议事处是哪一个 ...