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

具体实现代码如下：

<!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. 定了,这个vue.js开源项目,面试时,一定会考问

     因为现在的网店,都是用的商城系统, 而实体店都是入座后,扫码打开网上商城进行选购(餐饮,超市等),所以,vue.js迅速开发网上购物商城系统成为了香饽饽, 本人开源2020年4月开发的购物商城系统, ...

  2. nginx 反向代理转发导致css，js，图片失效

    为什么80%的码农都做不了架构师?>>>   需要添加以下配置 location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ { proxy_pass htt ...

  3. JAVA_WEB--jsp概述

    JSP全名为Java Server Pages,中文名叫java服务器页面,其根本是一个简化的Servlet设计,它是由Sun Microsystems公司倡导.许多公司参与一起建立的一种动态网页技术 ...

  4. SaltStack漏洞导致的挖矿排查思路

    描述 SaltStack是一套C/S架构的运维工具,服务端口默认为4505/4506,两个端口如果对外网开放危害非常大,黑客利用SaltStack的远程命令执行漏洞CVE-2020-11651可以直接 ...

  5. C. Anton and Fairy Tale(数学推式子)

    \(数学题,式子并不难推,但边界是真的烦\) \(\color{Red}{Ⅰ.其实可以发现,当m>=n时,每次都可以粮食补到n,所以一定是在第n天消耗完毕}\) \(\color{Purple} ...

  6. shell 条件结构之 if 语句使用总结

    文章目录 #条件判断的格式 [ exp ] [[ exp ]] test exp 注意: exp 与 "["."]"括号之间必须要有空格,否则会报语法错误: [ ...

  7. [hdu5312]数的拆分，数学推导

    题意:给定一个序列,a[n]=3n(n-1)+1,n>=1,求给定的m(m<=1e9)最少可以用几个a里面的数表示(可以重复) 思路:对答案分类 (1)假定答案为1,则m必定是a中的某一个 ...

  8. Python 简明教程 --- 0，前言

    微信公众号:码农充电站pro 个人主页:https://codeshellme.github.io Life is short, you need Python! -- Bruce Eckel 0,关 ...

  9. Mysql 常用函数（10）- strcmp 函数

    Mysql常用函数的汇总,可看下面系列文章 https://www.cnblogs.com/poloyy/category/1765164.html strcmp 的作用 比较两个字符串的顺序是否完全 ...

  10. mybatis-generator生成的mapper中的

    int updateByExampleSelective(@Param("record") Shop record, @Param("example") Sho ...