<!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 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>

</body>

</html>

基本思路:

　　运用position: absolute来进行定位布局,从第二排开始每次寻找高度最小的位置插入元素

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

  1. 原生js实现图片瀑布流布局，注释超详细

    完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  2. 原生 JS 实现一个瀑布流插件

    更好的阅读体验,点击 原文地址 瀑布流布局中的图片有一个核心特点 -- 等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest.花瓣网等等.那么接下来就基于这个特点开始瀑布流探 ...

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

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

  4. js实现网页瀑布流布局

    效果图: html代码实现网页布局: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  5. 原生js 实现的瀑布流

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. JS实现动态瀑布流及放大切换图片效果(js案例)

    整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击 ...

  7. js 实现图片瀑布流效果，可更改配置参数 带完整版解析代码[waterFall.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...

  8. 原生JS实现瀑布流

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

  9. JS 瀑布流布局

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

随机推荐

  1. netty源码理解（三） 从channel读取数据

    下面的是ServerBootstrap 的内部类 ServerBootstrapAcceptor extends ChannelInboundHandlerAdapter 的方法 这里其实卡住了我很长 ...

  2. 2019-03-01-day002-基础编码

    01 昨日内容回顾 编译型: 一次性编译成二进制. 优点:质型速度快. 确定:开发效率低,不能跨平台. 解释型: 逐行解释,逐行运行. 优点:开发效率高,可以跨平台. 缺点:回字形效率低. pytho ...

  3. MySQL Workbench将模型生成SQL文件出错

    采用MySQL Workbench 设计好表和表关系后,从 File | Export 菜单中,选择 Forward Engineer SQL CREATE Script(正向引擎), 将我们的模型生 ...

  4. 解析JSON 注意解析数据为一个对象的情况.--加一下说明

    应用场景: 调某接口时, 获取json数据, 需要对数据进行解析 . 第一种: 只判断接口是否调用成功 { "code":"10102000", "d ...

  5. Python学习笔记第五周

    目录 一.基础概念 1.模块定义 2.包的定义 3.导入包的本质 4.导入模块的本质 5.导入方法 6.import的本质 7.导入优化 8.模块分类 9.标准库介绍 1.time与datetime ...

  6. Python之路，第十篇：Python入门与基础10

    python3 函数 函数(function) 什么是函数: 函数是可以重复执行的代码块,可以重复使用: 作用: 定义用户级的函数:实现了一个代码块的封装: 语法: def   函数名(参数列表): ...

  7. POJO，JaveBean，VO，DTO

    POJO - POJO(Plain Ordinary Java Object)简单的Java对象,实际就是普通JavaBeans,是为了避免和EJB混淆所创造的简称. 使用POJO名称是为了避免和EJ ...

  8. JAVA基础部分复习(一、8中基础类型，以及String相关内容)

    以下是关于java中8种基本类型的介绍说明: package cn.review.day01; /** * java基础复习,8种数据类型 * (byte,short,long,int,double, ...

  9. HihoCoder - 1801 :剪切字符串 (置换与逆序对)

    Sample Input 6 5 11 Sample Output 6 小Hi有一个长度为N的字符串,这个字符串每个位置上的字符两两不同.现在小Hi可以进行一种剪切操作: 选择任意一段连续的K个字符, ...

  10. fedora的选择

    Fedora 首页包含3种版本: 工作站,服务器,ATOMIC 个人只要使用工作站即可,然后,下载界面有另一个选择:Silverblue ========================== Silv ...