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

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. 三部排序|2013年蓝桥杯B组题解析第六题-fishers

    三部排序| 一般的排序有许多经典算法,如快速排序.希尔排序等. 但实际应用时,经常会或多或少有一些特殊的要求.我们没必要套用那些经典算法,可以根据实际情况建立更好的解法. 比如,对一个整型数组中的数字 ...

  2. Component 初识组件

    component组件是Vue学习的重点.重点.重点,重要的事情说三遍.所以你必须学好Vue component.其实组件就是制作自定义的标签,这些标签在HTML中是没有的.比如:<diy> ...

  3. CommandLine exe参数

    [Verb("OptionsEntity")] public class OptionsEntity { [Option('a', HelpText = "Plantfo ...

  4. 用spring tool suite插件创建spring boot项目时报An internal error occurred during: "Building UI model". com/google/common/

    本文为博主原创,未经允许不得转载 在用spring tool suite创建spring boot项目时,报一下异常: 查阅很多资料之后发现是因为装的spring tool suite的版本与ecli ...

  5. 增强 用文本增强修改SAP标准屏幕中的字段名称 属于元素的文本增强

    如果想要改变标准屏幕中的字段名称,如把物料主数据基本数据元素的名字改为我们想要的名字 . 1.首先,事务MM03进入物料主数据的基本数据2视图中,将鼠标光标放在需要更改的字段“页格式”上,然后按F1键 ...

  6. Windows has encountered a critical problem and will restart automatically in one minute. Please save your work now

    Windows has encountered a critical problem and will restart automatically in one minute. Please save ...

  7. 关于页面的跳转添加参数（比如id啥的）

    最近一些新手老是问我一些关于页面之间的传递跳转,怎么带参数这件事,(比如说一个列表页到详情页面数据是怎么传输的),今个没事就在这说一些! 这里拿列表页面到详情页面来阐述下哈! 首先在列表页,我们通过a ...

  8. Error: Program type already present: com.google.gson.FieldAttributes 的解决方法

    在app中的build.gradle中加入如下代码, configurations { all*.exclude group: 'com.google.code.gson' all*.exclude ...

  9. python web.py实现简单的get和post请求

    使用web.py框架,实现简单的get和post请求: py文件名:mytest.py import web urls = ( '/', 'hello' ) app = web.application ...

  10. 构造函数中用:base

    如果person中有自己写的构造函数 则Student类的构造方法必须要加:base继承这个构造方法!因为默认的Student:base(空)构造方法已经被干掉了 构造方法的调用//base里的参数, ...