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

具体实现代码如下：

<!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. 写给Java程序员的Java虚拟机学习指南

    大家好,我是极客时间<深入拆解Java虚拟机>作者.Oracle Labs高级研究员郑雨迪.有幸借这个专题的机会,能和大家分享为何Java工程师要学Java虚拟机?如何掌握Java虚拟机? ...

  2. java的基础知识01

    来自<head first java>书籍的摘录

  3. Java实现功能简单的学生管理系统（附带源代码）

    这几天Java学了点新的知识,打算要用这些知识做一个比较简单的管理系统,实战一下子,代码中的功能简洁,可能不多,但是作为一个练手来了解一个项目是怎么样一点一点思考的还是不错的 一.代码中要实现的功能 ...

  4. Java——多线程之对象及变量的并发访问

    Java多线系列文章是Java多线程的详解介绍,对多线程还不熟悉的同学可以先去看一下我的这篇博客Java基础系列3:多线程超详细总结,这篇博客从宏观层面介绍了多线程的整体概况,接下来的几篇文章是对多线 ...

  5. Java——Java连接Jira，创建、修改、删除工单信息

    还不了解Jira是什么的同学可以看一下这篇文章:https://www.cnblogs.com/wgblog-code/p/11750767.html 本篇文章主要介绍如何使用Java操作Jira,包 ...

  6. dp 20190617

    A. Alternative Thinking 这个标的是dp,但是我感觉就只能算思维题,不是特别难, 你仔细想想就知道,你先求出01这样子满足条件的个数,如果要进行改变,最多只可以增加两个,也可以增 ...

  7. oracle常用字符函数

    字符函数: concat:(字符连接函数) --字符连接 select concat('con','cat') from dual; select 'co'||'nc'||'at' from dual ...

  8. 基础JS遇到的一些题01

    1.两种数组去重方法 const unique = arr =>{ let mySet = new Set(arr); /!* let newArr =[]; for (let i = 0 ;i ...

  9. Facebook 开源微光效果 Shimmer

    我的引言 晚上好,我是吴小龙同学,我的公众号「一分钟 GitHub」会推荐 GitHub 上好玩的项目,挖掘开源的价值,欢迎关注我. 今天要推荐的是 Facebook 开源的闪光效果:Shimmer, ...

  10. 深入理解CSS定位—浮动模型

    前面我们讲到了绝对定位,在这篇文章中,我们将讲到3种定位模型中的浮动模型.主要参考 张鑫旭在慕课网的 深入理解float 那些年我们一起清过的浮动---by 一丝丝凉 精通CSS 注意:第二小节基本参 ...