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

具体实现代码如下：

<!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. HTML中使用CSS样式（下）

    上节内容回顾加补充: 补充:默认img标签,有一个1px的边框 如果点击图片跳转到连接,a标签下套img标签,在IE有的版本中,会有蓝色边框. <a href="http://blog ...

  2. Get史上最优雅的加密方式！没有之一！

    你的配置文件是不是还在使用下面这种落后的配置暴露一些密码: jdbc.url=jdbc:mysql://127.0.0.1:3305/afei jdbc.username=afei 如果是,那么继续往 ...

  3. windows下安装Pycham2020软件

    1.在pycham官网下载安装软件https://www.jetbrains.com/pycharm/download/#section=windows 2.我下载的是64位的安装包,现在开始安装 3 ...

  4. Character Array and Character Pointer

    最近复习数据结构实验时,碰到这么一行代码,看的有点不爽. typedef char** HuffmanCode; 借此梳理下数组和指针. int* p; //指针变量p中存的地址代表的内存单元中的数据 ...

  5. 2019 ICPC 银川网络赛 F-Moving On （卡Cache）

    Firdaws and Fatinah are living in a country with nn cities, numbered from 11 to nn. Each city has a ...

  6. Jenkins 介绍

    持续集成: 持续集成是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成.每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证 ...

  7. IBM Rational Rose软件下载以及全破解方法

    最近忙着作业,软件设计的类图着实难画,于是整理了rose的下载和破解方法 Rational Rose是Rational公司出品的一种面向对象的统一建模语言的可视化建模工具.用于可视化建模和公司级水平软 ...

  8. CSS设置table样式

    \(\color{purple}{表格是个很重要的东西,让我们来美化一下吧!}\) table{ width:290px;height:300px; border:1px solid black;/* ...

  9. P2422 良好的感觉(两头单调)

    描述:https://www.luogu.com.cn/problem/P2422 kkk做了一个人体感觉分析器.每一天,人都有一个感受值Ai,Ai越大,表示人感觉越舒适.在一段时间[i, j]内,人 ...

  10. CC2530定时器

    一.定时/技术器的基本原理 定时/计数器,是一种能够对内部时钟信号或外部输入信号进行计数,当计数值达到设定要求时,向CPU提出中断处理请求,从而实现定时或者计数功能的外设.         定时/计数 ...