本文是使用面向对象的思想实现多列布局(瀑布流)。当然，使用面向过程也能实现，具体效果图和案例如下：

具体实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">*
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>*
    <style>*
        *{
            padding: 0;*
            margin: 0;*
        }
        .con{*
            margin: 0 auto;*
            position: relative;*
        }
        .box{
            float: left;
            padding: 8px;
        }
        .box .imgbox{*
            *padding: 4px;*
            border: 1px #000 solid;*
            border-radius: 6px;
        }
        .box .imgbox img{
            width: 200px;
            display: block;*
        }
    </style>
    <script>
        // 整个页面加载完成之后再执行
       * window.onload=function(){*
            new obj;*
        }
        *class obj{
            constructor(){
                this.aBox = document.querySelectorAll('.box');
                *this.con = document.querySelector('.con'); *  
                *this.clientW = document.documentElement.clientWidth;
                this.init();
                this.orderLine();
            }
           * init(){
                this.num = Math.floor(this.clientW/this.aBox[0].offsetWidth);
                *this.con.style.width=this.num*this.aBox[0].offsetWidth+'px';*
                this.minHeight = [];
                *for(var i=0;i<this.num;i++){
                    this.minHeight.push(this.aBox[i].offsetHeight);    
                }
                console.log(this.minHeight);
            }
            *orderLine(){
                for(var i=this.num;i<this.aBox.length;i++){
                    var min = Math.min(...this.minHeight);*
                    var index = this.minHeight.indexOf(min);
                    this.aBox[i].style.position='absolute';
                    this.aBox[i].style.left=index*this.aBox[0].offsetWidth+'px';*
                    this.aBox[i].style.top= min +'px';
                    this.minHeight[index]+=this.aBox[i].offsetHeight;
                }
            }
        }
    </script>
</head>
<body>
    <div class="con">
        <div class="box">
            <div class="imgbox">*
                <img src="./images/6.jpg" alt="">*
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./images/8.jpg" alt="">*
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./images/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./images/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./images/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./images/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./images/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./images/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./images/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./images/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./images/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./images/2.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./images/6.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./images/8.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./images/7.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./images/4.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./images/2.jpg" alt="">
            </div>
        </div>    
    </div>
</body>
</html>

js-实现多列布局(瀑布流)的更多相关文章

  1. css3多列布局瀑布流加载样式

    看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...

  2. 代码: 两列图片瀑布流（一次后台取数据，图片懒加载。下拉后分批显示图片。图片高度未知，当图片onload后才显示容器）

    代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...

  3. css布局-瀑布流的实现

    一.基本思路 1.先看最终的效果图: 2.实现原理:通过position:absolute(绝对定位)来定位每一个元素的位置,并且将当前列的高度记录下来方便下一个dom位置的计算 二.代码实现 1.版 ...

  4. Node JS爬虫：爬取瀑布流网页高清图

    原文链接:Node JS爬虫:爬取瀑布流网页高清图 静态为主的网页往往用get方法就能获取页面所有内容.动态网页即异步请求数据的网页则需要用浏览器加载完成后再进行抓取.本文介绍了如何连续爬取瀑布流网页 ...

  5. 详细分享UICollectionView的自定义布局(瀑布流, 线性, 圆形…)

    前言: 本篇文章不是分享collectionView的详细使用教程, 而是属于比较’高级’的collectionView使用技巧, 阅读之前, 我想你已经很熟悉collectionView的基本使用, ...

  6. Objectiv-c - UICollectionViewLayout自定义布局-瀑布流

    最近刚写的一个简单的瀑布流. 整体思路可能不是很完善. 不过也算是实现效果了. 高手勿喷 思路: 自定义UICollectionViewLayout实际上就是需要返回每个item的fram就可以了. ...

  7. css3多列及瀑布流效果

    css3内容分块,多列效果(类似报纸版块排版): .div02{ /*count:内容分为几列,gap:内容与分割线的距离,rule:分割线样式*/ column-count:; column-gap ...

  8. 详细分享UICollectionView的自定义布局(瀑布流, 线性, 圆形...)

    前言: 本篇文章不是分享collectionView的详细使用教程, 而是属于比较'高级'的collectionView使用技巧, 阅读之前, 我想你已经很熟悉collectionView的基本使用, ...

  9. 基于CSS多列实现瀑布流

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

随机推荐

  1. 从Webpack源码探究打包流程，萌新也能看懂～

    简介 上一篇讲述了如何理解tapable这个钩子机制,因为这个是webpack程序的灵魂.虽然钩子机制很灵活,而然却变成了我们读懂webpack道路上的阻碍.每当webpack运行起来的时候,我的心态 ...

  2. Clickhouse 字符串拆分 OR 一行转多行

    Clickhouse 字符串拆分 OR 一行转多行 我想把 '123_456_142354_23543' 通过'_' 下划线进行拆分成

  3. 我想solo自己一个人！

    区域赛之后你就该走了,现在你告诉我,没精力不打了,我真谢谢你! 今年就TM的没有一点舒心的地方! 父母分居, 队友出走, 队伍解散, 白天家里两个外甥很吵, 鼻窦炎复发, 喜欢的妹子也追不到, 整夜失 ...

  4. 数学--数论--HDU - 6124 Euler theorem (打表找规律）

    HazelFan is given two positive integers a,b, and he wants to calculate amodb. But now he forgets the ...

  5. 疯子的算法总结(九) 图论中的矩阵应用 Part 2 矩阵树 基尔霍夫矩阵定理 生成树计数 Matrix-Tree

    定理: 1.设G为无向图,设矩阵D为图G的度矩阵,设C为图G的邻接矩阵. 2.对于矩阵D,D[i][j]当 i!=j 时,是一条边,对于一条边而言无度可言为0,当i==j时表示一点,代表点i的度. 即 ...

  6. 虚拟 IP 设为静态 IP

    一:虚拟机设置桥接模式 1.进入虚拟机设置中将网络适配器设置成桥接模式 2.编辑--虚拟网络编辑器--选择桥接 二:将虚拟IP设置成静态IP (1)方案一:进入虚拟机系统 System 设置 (2)方 ...

  7. Python爬虫---爬取抖音短视频

    目录 前言 抖音爬虫制作 选定网页 分析网页 提取id构造网址 拼接数据包链接 获取视频地址 下载视频 全部代码 实现结果 待解决的问题 前言 最近一直想要写一个抖音爬虫来批量下载抖音的短视频,但是经 ...

  8. P1714切蛋糕(不定区间最值)

    题面 今天是小Z的生日,同学们为他带来了一块蛋糕.这块蛋糕是一个长方体,被用不同色彩分成了N个相同的小块,每小块都有对应的幸运值. 小Z作为寿星,自然希望吃到的第一块蛋糕的幸运值总和最大,但小Z最多又 ...

  9. mac安装vue-devtools

    mac安装vue devtools 1.到github下载vue tool 的压缩包 正常的方法:git clone https://github.com/vuejs/vue-devtools 但事实 ...

  10. Oracle触发器之系统触发器

    系统触发器 可以用系统触发器记录一些ddl的数据操作或者是数据库的登录 或者登出操作. 语法: create or replace trigger 触发器名称 before/after 触发器时机 事 ...