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

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. 使用vs code搭建C开发环境

    关于搭建vscode的开发环境来开发c网上已经有很多类似的贴子,但是几乎都是直接给出tasks.json和launch.json文件,并未说明这两个文件的作用以及如何配置.这里面向纯小白着重说明下(1 ...

  2. P3975 [TJOI2015]弦论

    思路 一眼SAM板子,结果敲了一中午... 我还是太弱了 题目要求求第k小的子串 我们可以把t=0当成t=1的特殊情况,(所有不同位置的相同子串算作一个就是相当于把所有子串的出现位置个数(endpos ...

  3. 论文笔记：Person Re-identification with Deep Similarity-Guided Graph Neural Network

    Person Re-identification with Deep Similarity-Guided Graph Neural Network 2018-07-27 17:41:45 Paper: ...

  4. Derek解读Bytom源码-创世区块

    作者:Derek 简介 Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchain/bytom ...

  5. pyqt5 窗口无边框和透明

    https://blog.csdn.net/FanMLei/article/details/79433229 按钮圆形方法属性border-radius:30px; QScrollArea 无法滚动用 ...

  6. Python Scrapy安装

    直接安装scrapy 各种报错,后来各种百度终于解决了,如下是亲身的经历. pip install scrapy 这样直接会报错. 第一步: 先安装wheel pip install wheel 第二 ...

  7. C# winform窗体间传值(使用委托或事件)

    窗体间传值 今天得空,刚好看到网上好多人再找winform窗体间传值的问题,由于昨天项目的优化的感觉不错,就写了个C# winform窗体间传值的demo,希望能给需要的人的带来帮助: 工程的源代码地 ...

  8. 【Python】【函数式编程】

    #[练习] 请定义一个函数quadratic(a, b, c),接收3个参数,返回一元二次方程: ax2 + bx + c = 0 的两个解. 提示:计算平方根可以调用math.sqrt()函数: & ...

  9. 解决输入git branch 进入编辑状态，mac下出现END，无法返回

    core.pager指定 Git 运行诸如log.diff等所使用的分页器,你能设置成用more或者任何你喜欢的分页器(默认用的是less), 当然你也可以什么都不用,设置空字符串: git conf ...

  10. iterrows(), iteritems(), itertuples()对dataframe进行遍历

      iterrows(): 将DataFrame迭代为(insex, Series)对. itertuples(): 将DataFrame迭代为元祖. iteritems(): 将DataFrame迭 ...