什么是图片瀑布流

用一张花瓣网页的图片布局可以很清楚看出图片瀑布流的样子：

简单来说，就是有很多图片平铺在页面上，每张图片的宽度相同，但是高度不同，这样错落有致的排列出 n 列的样子很像瀑布，于是就有了瀑布流图片一说。

实现原理

1、第一种方式

第一种方式前提是：图片的宽度固定，但是列可变（根据屏幕大小）

通过上面的介绍，我们知道要实现瀑布流的前提是宽度一致（假如为100px），高度可以不相同。

我们首先确定排布的列数（假如为4列），那么第一行只能放4张图片，然后将每个图片的高度放入一个数组中（假如为 heightArr = [100,50, 200,30]），当我们在放入下一张图片的时候就要判断这个数组中哪个高度是最小的（这里是30），然后还要知道最小的高度所在高度数组的索引（这里是i = 3），然后我们就可以对这张图片进行定位：

{

    position: absolute;

    left: i*100 + 'px';

    top: 30 + 'px'

}

如此遍历剩下的图片即可。

实现代码

下面是未处理的原始代码，图片之间间隔很多空白，影响美观。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box {

            position: relative;

        }

        img {

            width: 200px;

            vertical-align: top;

            padding: 5px;

        }

    </style>

</head>

<body>

    <div class="box">

        <img src="./images/img/2-.jpg" alt="">

        <img src="./images/img/3-.jpg" alt="">

        <img src="./images/img/4-.jpg" alt="">

        <img src="./images/img/5-.jpg" alt="">

        <img src="./images/img/6-.jpg" alt="">

        <img src="./images/img/7-.jpg" alt="">

        <img src="./images/img/8-.jpg" alt="">

        <img src="./images/img/9-.jpg" alt="">

        <img src="./images/img/10-.jpg" alt="">

        <img src="./images/img/11-.jpg" alt="">

        <img src="./images/img/12-.jpg" alt="">

        <img src="./images/img/13-.jpg" alt="">

        <img src="./images/img/14-.jpg" alt="">

        <img src="./images/img/15-.jpg" alt="">

        <img src="./images/img/16-.jpg" alt="">

    </div>

</body>

</html>

下面是处理后的代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box {

            position: relative;

        }

        img {

            width: 200px;

            vertical-align: top;

            padding: 5px;

        }

    </style>

</head>

<body>

    <div class="box">

        <img src="./images/img/2-.jpg" alt="">

        <img src="./images/img/3-.jpg" alt="">

        <img src="./images/img/4-.jpg" alt="">

        <img src="./images/img/5-.jpg" alt="">

        <img src="./images/img/6-.jpg" alt="">

        <img src="./images/img/7-.jpg" alt="">

        <img src="./images/img/8-.jpg" alt="">

        <img src="./images/img/9-.jpg" alt="">

        <img src="./images/img/10-.jpg" alt="">

        <img src="./images/img/11-.jpg" alt="">

        <img src="./images/img/12-.jpg" alt="">

        <img src="./images/img/13-.jpg" alt="">

        <img src="./images/img/14-.jpg" alt="">

        <img src="./images/img/15-.jpg" alt="">

        <img src="./images/img/16-.jpg" alt="">

    </div>

</body>

<script src="./jquery.min.js"></script>

<script>

    $(function () {

        // 获取图片的宽度(200px)

        let imgWidth = $('img').outerWidth(); // 200

        waterfallHandler();

        // 瀑布流处理

        function waterfallHandler() {

            // 获取图片的列数

            let column = parseInt($(window).width() / imgWidth);

            // 高度数组

            let heightArr = [];

            for(let i=0; i<column; i++) {

                heightArr[i] = 0;

            }

            // 遍历所有图片进行定位处理

            $.each($('img'), function (index, item) {

                // 当前元素的高度

                let itemHeight = $(item).outerHeight();

                // 高度数组最小的高度

                let minHeight = Math.min(...heightArr);

                // 高度数组最小的高度的索引

                let minIndex = heightArr.indexOf(minHeight);

                $(item).css({

                    position: 'absolute',

                    top: minHeight + 'px',

                    left: minIndex * imgWidth + 'px'

                });

                heightArr[minIndex] += itemHeight;

            });

        }

        // 窗口大小改变

        $(window).resize(function () {

            waterfallHandler();

        });

    });

</script>

</html>

2、第二种方式

第二种方式前提是：列是固定的个数，然后图片根据屏幕的宽度进行自适应缩放。

这种方式由于图片是可以缩放的，宽高不好确定，因此不好用定位的方式处理。

我们可以这样处理，既然知道了列，那么每一列做一个容器。然后遍历图片，将图片放入容器高度最小的容器中即可。

这里我们使用js来添加图片，而不是事先写好在html中了。

实现代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        ul li {

            list-style: none;

            float: left;

        }

    </style>

</head>

<body>

</body>

<script src="./jquery.min.js"></script>

<script>

    $(function () {

        const COLUMN = 4; // 4列

        let arr = []; // 存储4列li

        let minHeight = [] // 存储4列的高度

        create();

        function create() {

            // 创建ul li作为每一列的容器

            $("<ul></ul>").appendTo($("body")).css("width", "100%");

            for (let i = 0; i < COLUMN; i++) {

                var li = document.createElement("li");

                $(li).appendTo($("ul"))

                    .css({

                        "width": "24%",

                        "margin": "0 0.5%"

                    });

                arr.push(li);

                // console.log(arr);

                minHeight.push(0);

            }

            createImg();

        }

        function createImg() {

            let img = new Image();

            img.num = 2;

            img.src = `./images/img/${img.num}-.jpg`; // 素材图片的规律为 2-.jpg 3-.jpg 4-.jpg ...

            $(img).css("width", "100%");

            // 当图片加载完后

            $(img).on("load", loadHandler);

        }

        function loadHandler() {

            // 高度数组的最小值

            let min = Math.min.apply(null, minHeight);

            // 高度数组的最小值索引

            let minIndex = minHeight.indexOf(min);

            // 克隆一份图片

            let im = this.cloneNode(true);

            // 将图片假如对应最小值索引的容器中

            arr[minIndex].append(im);

            // 更新最小值索引的容器的高度

            minHeight[minIndex] += im.getBoundingClientRect().height;

            this.num++;

            // 图片的个数只有79张

            if (this.num > 79) {

                $(this).off("load", loadHandler);

                return;

            }

            this.src = `./images/img/${this.num}-.jpg`;

        }

    });

</script>

</html>

本文完。

（啾咪 ^.<）

图片瀑布流，so easy！的更多相关文章

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

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

  2. 利用LruCache载入网络图片实现图片瀑布流效果(改进版)

    PS: 2015年1月20日21:37:27 关于LoadImageAsyncTask和checkAllImageViewVisibility可能有点小bug 改动后的代码请參见升级版本号的代码 ht ...

  3. Jquery实现图片瀑布流思路-简单版

    目录 Jquery实现图片瀑布流思路-简单版 1.预备 2.开始 1.声明 2.主体 3.窗体大小改变事件 Jquery实现图片瀑布流思路-简单版 注意:本篇文章基于知道每张图片的实际尺寸的情况下 特 ...

  4. js图片瀑布流效果

    要实现图片瀑布流效果,首先得准备几张图片. html的部分比较简单就是将图片加载到浏览器就可以了 代码如下(注意放的图片多一点要不然之后无法滑动鼠标就无法达到瀑布流效果): <!DOCTYPE ...

  5. js 实现图片瀑布流效果，可更改配置参数 带完整版解析代码[waterFall.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...

  6. 基于.NetCore开发博客项目 StarBlog - (10) 图片瀑布流

    系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...

  7. 用原生JavaScript实现图片瀑布流的浏览效果

    学习JS,活跃思维,灵活运用的一个较为典型的学习案例.同一个瀑布流的效果但实现方式却很多,利用递归.冒泡等等手法都可以达到你想要的目的.这次要说的就是利用类似递归来实现此效果的原创方案.此方案个人认为 ...

  8. 基于jQuery 的图片瀑布流实现

    解题思路: 第1步  分析问题:我这边的处理方式是以列为单位.每次滚动条滚到底部,把需要加的新的内容放在高度最小的列.如下图所示 加载后的显示 如果在继续往下滚动.新图片就会在1下边显示,如此类推. ...

  9. 服务器代理+jQuery.ajax实现图片瀑布流

    服务器代理机制破解浏览器的同源策略 瀑布流功能实现分析 具体实现代码及业务实现分析 一.服务器代理机制破解浏览器同源策略 由于浏览器的同源策略无法请求不同域名下的资源,但是服务器的后台程序并不受同源策 ...

随机推荐

  1. 设计模式的七大原则(Java)

    一.OOP三大基本特性 OOP 面向对象程序设计(Object Oriented Programming)作为一种新方法,其本质是以建立模型体现出来的抽象思维过程和面向对象的方法.模型是用来反映现实世 ...

  2. Oracle 的 rownum 问题

    对于 Oracle 的 rownum 问题,很多资料都说不支持>,>=,=,between...and,只能用以上符号(<.<=.!=),并非说用>,>=,=,be ...

  3. 一道短小精悍的JS小题目

    看到题目你是不是以为我在开车,没错,我就不承认,你能咋的,你瞅啥,别瞅我,瞅题 题目是这样式的 结果是啥呀,这里我就不买关子了,结果是undefined,相信基础好一点的大佬们一眼就能看出来,像我这种 ...

  4. Java类和对象动手动脑

    动手动脑1 以下代码为何无法通过编译?哪儿出错了?

  5. 记录一次Metaspace扩容引发FGC的调优总结

    开始之前 在开始之前先记录一个我碰到的jvm调优的坑.那就是… 为啥我配置到idea64exe.vmoptions中的参数没有生效??? 由于之前一直是在mac上开发,本地开发时当需要优化jvm参数的 ...

  6. 『嗨威说』算法设计与分析 - PTA 数字三角形 / 最大子段和 / 编辑距离问题（第三章上机实践报告）

    本文索引目录: 一.PTA实验报告题1 : 数字三角形 1.1 实践题目 1.2 问题描述 1.3 算法描述 1.4 算法时间及空间复杂度分析 二.PTA实验报告题2 : 最大子段和 2.1 实践题目 ...

  7. C语言-查找一个元素在数组中的位置

    #include<stdio.h> #include <stdlib.h> #include <time.h> int search(int key, int a[ ...

  8. 全面系统Python3入门+进阶课程 ✌✌

    全面系统Python3入门+进阶课程 (一个人学习或许会很枯燥,但是寻找更多志同道合的朋友一起,学习将会变得更加有意义✌✌) 无论是大数据.人工智能还是机器学习,Python都是最热门的首选语言 ,这 ...

  9. [NOIp2009] luogu P1072 Hankson 的趣味题

    把 c 改成 d 下了两个点. 题目描述 已知正整数 a0,a1,b0,b1a_0,a_1,b_0,b_1a0​,a1​,b0​,b1​,设某未知正整数 xxx 满足: xxx 和 a0a_0a0​ ...

  10. Flyway 助力数据库脚本自动化管理攻略

    原文地址:梁桂钊的博客 博客地址:http://blog.720ui.com 欢迎关注公众号:「服务端思维」.一群同频者,一起成长,一起精进,打破认知的局限性. 今天,探讨一个有趣的话题:我们可以通过 ...