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

具体实现代码如下：

<!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插件解析：HtmlWebpackPlugin是干什么的以及如何使用它

    HtmlWebpackPlugin是一个出现频率比较高的webpack插件,本文对其作用和配置作一番比较详细的分析(本文的配置均在webpack.config.js中进行). 为何使用它 简单来说,H ...

  2. 你知道吗？iOS不少程序常传送装置信息给第三方

    2019独角兽企业重金招聘Python工程师标准>>> 华盛顿邮报( The Washington Post)与隐私程序开发商Disconnect共同进行的研究揭露,许多iOS程序其 ...

  3. XSS攻击简单介绍

    之前由我负责维护的一个项目被检测出存在可能被XSS攻击的漏洞. 吓得我赶紧恶补了下XSS. XSS,全称为Cross Site Script,跨站脚本攻击,是WEB程序中一种常见的漏洞.其主要的攻击手 ...

  4. C#读写ini

    using System; using System.IO; using System.Runtime.InteropServices; using System.Text;   namespace ...

  5. CF--思维练习--CodeForces - 220C Little Elephant and Shifts （STL模拟）

    ACM思维题训练集合 The Little Elephant has two permutations a and b of length n, consisting of numbers from ...

  6. js怎么删除数组元素，有哪些删除元素方法

    JavaScript删除元素方法 1.根据索引删除数组元素 delete 数组[索引]   *注意delete 后面是空格 var arr1=["aa","bb" ...

  7. linux下在用python向文件写入数据时'\n'不起作用

    网上翻看一圈,大家都说利用write写数据换行,在linux下用'\n',windows下利用'\r\n',可是尝试了一下,'\n'在windows底下可换行,在linux底下居然不起作用,最后利用' ...

  8. C# 基础至集合-数组、List<T>、ArrayList、LinkedList、HashMap的一些区别

    1:数组 ]; //赋值 strs[] = "; strs[] = "; //修改 strs[] = "burg"; //删除 没法删除 除非转化为可变数组li ...

  9. Spring Cloud Alibaba系列（三）使用feign进行服务调用

    什么是Feign Feign是spring cloud提供的一个声明式的伪http客户端,它使得调用远程服务就像调用本地服务一样简单,只需要创建一个接口并添加一天注解即可. Nacos很好的兼容了Fe ...

  10. [coj 1353 Guessing the Number]kmp，字符串最小表示法

    题意:给一个字符串,求它的最小子串,使得原串是通过它重复得到的字符串的一个子串. 思路:先求最小长度,最小循环长度可以利用kmp的next数组快速得到,求出长度后然后利用字符串最小表示法求循环节的最小 ...