完整代码：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

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

        <title>瀑布流</title>

        <style type="text/css">

            img {

                width: 300px;

            }

            li {

                position: absolute;

                s left: 0;

                top: 0;

                list-style: none;

            }

            ul {

                margin: 0 auto;

                position: relative;

            }

            * {

                margin: 0;

                padding: 0;

            }

        </style>

    </head>

    <body>

        <ul></ul>

    </body>

    <script src="utils.js"></script>

    <script>

        let ul = document.querySelector('ul'), //获取ul标签

            list = ul.children, //动态更新ul里面的子元素

            teep = 10, //间距

            width = 300, //每张图片的宽度

            cols = Math.floor(document.documentElement.clientWidth / (width + teep)), //计算有多少列

            hh = [], //存取每一列的高度

            num = 0, //记录加载完成图片数量

            om = 0 //记录已经排版完成的li数量

        ul.style.width = cols * (width + teep) - teep + 'px' //计算ul的宽度

        get({ //提前封装好的方法

                url: 'http://rap2.taobao.org:38080/app/mock/256901/json'

            })

            .then(a => { //请求数据

                a = JSON.parse(a).img

                let dom = document.createDocumentFragment() //创建文档碎片

                a.forEach((item, index) => { //有多少条数据就创建多少个li

                    let li = document.createElement('li')

                    li.innerHTML = `<img src="${item.src}">`

                    dom.appendChild(li) //把li添加到文档碎片中

                })

                ul.appendChild(dom) //将文档碎片添加到ul中

                let imgs = Array.from(list).reduce((curr, item, index) => { //将每张img节点组成数组

                    if (om <= index) {

                        curr.push(item.querySelector('img'))

                    }

                    return curr

                }, [])

                Array.from(imgs).forEach(item => { //遍历每张图片

                    item.onload = () => { //该图片加载完成

                        num++

                        if (num === imgs.length) { //图片都加载完成了

                            for (let i = om; i < list.length; i++) { //遍历ul下的每个li

                                if (i < cols) { //给第一行每个li设置left/top值

                                    list[i].style.left = (width + teep) * i + 'px'

                                    list[i].style.top = teep + 'px'

                                    hh.push(list[i].offsetHeight + teep * 2)

                                } else { //除了第一行剩下的li

                                    let minHeight = Math.min(...hh) //求出最小高度

                                    let minIndex = hh.indexOf(minHeight) //求出最小高度的索引值

                                    list[i].style.left = (width + teep) * minIndex + 'px'

                                    list[i].style.top = minHeight + 'px'

                                    hh[minIndex] = list[i].offsetHeight + minHeight + teep //将最小高度更新

                                }

                            }

                            om = list.length //更新排版完成数量

                            ul.style.height = ul.scrollHeight + 'px' //给ul设置高度

                        }

                    }

                })

            })

    </script>

</html>

如果要复制运行看效果的话，需要引入我已经封装好的get请求方法

代码如下：

function ajax(obj, fn) {

    let ajx = new XMLHttpRequest() //创建ajax实例

    obj.type = obj.type ? obj.type : 'get' //判断type存不存在，不存在默认等于get

    let data = '' //向后端发送的数据

    if (obj.data) { //判断是否存在

        for (let i in obj.data) {

            data += i + '=' + obj.data[i] + '&' //键值拼接成name=zhagnsan&age=18形式

        }

        let k = data.split('')

        k.splice(data.length - 1, 1)

        data = k.join('')

    }

    if (obj.type == 'get') { //处理get请求发送数据

        ajx.open(obj.type, obj.url + '?' + data) //地址上拼接数据

        ajx.send()

    } else if (obj.type == 'post') { //处理post请求发送数据

        ajx.open(obj.type, obj.url)

        ajx.setRequestHeader('content-type', 'application/x-www-form-urlencoded') //设置请求头

        ajx.send(data) //发送数据

    }

    ajx.onreadystatechange = () => {

        if (ajx.readyState == 4) {

            if (ajx.status == 200) {

                /*

                将得到的数据传给回调函数

                短路写法，如果不传fn为空不会执行，有值就执行

                */

                fn && fn(ajx.responseText)

            }

        }

    }

}

// ajax({ //调用封装的方法

//     type: 'get', //可以不写，默认get

//     url: 'http://localhost/day02/api/gouwu.php', //请求地址

//     data: { //需要传输的数据,可选

//         name: 'zhangsan',

//         age: 18

//     }

// },a=>{//处理的到的数据

//     console.log(a)

// })

function jsonp(obj) {

    let sc = document.createElement('script')

    let data = ''

    if (obj.data) {

        for (let i in obj.data) {

            data += `${i}=${obj.data[i]}&`

        }

        data = data.slice(0, -1)

        sc.setAttribute('src', obj.url + `?cd=${obj.cd}&${data}`)

    } else {

        sc.setAttribute('src', obj.url + `?cd=${obj.cd}`)

    }

    document.body.appendChild(sc)

}

// jsonp({

//     url:'http://localhost/day02/api/gouwu.php',

//     cd:'fn'

// },a=>{

//     console.log(a)

// })

function get(obj) {

    return new Promise((resolve, reject) => {

        let a = new XMLHttpRequest()

        let data = ''

        if (obj.data) {

            for (let i in obj.data) {

                data += i + '=' + obj.data[i] + '&'

            }

            data = data.slice(0, -1)

            a.open('get', obj.url + '?' + data)

        }else{

            a.open('get', obj.url)

        }

        a.send()

        a.onreadystatechange = () => {

            if (a.readyState === 4) {

                if (a.status === 200) {

                    resolve(a.responseText)

                } else {

                    reject()

                }

            }

        }

    })

}

// get({//调用格式

//     url:'http://localhost/day02/api/gouwu.php',//获取的地址

//     data:{ //可不写

//         a:1,

//         b:2

//     }

// }).then(a=>{//获取数据成功

//     console.log(a)

// }).catch(err=>{ //获取数据失败

//     console.log(err)

// })

原生js实现图片瀑布流布局，注释超详细的更多相关文章

  1. 原生js实现的瀑布流布局

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

  3. 原生JS—实现图片循环切换的两种方法

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...

  4. 原生JS—实现图片循环切换及监测鼠标滚动切换图片

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...

  5. 页面性能优化-原生JS实现图片懒加载

    在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...

  6. 原生js实现图片轮播思路分析

    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...

  7. 原生JS实现图片循环切换

    <!-- <!DOCTYPE html> <html> <head> <title>原生JS实现图片循环切换 —— 方法一</title&g ...

  8. 原生 JS 实现一个瀑布流插件

    更好的阅读体验,点击 原文地址 瀑布流布局中的图片有一个核心特点 -- 等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest.花瓣网等等.那么接下来就基于这个特点开始瀑布流探 ...

  9. 基于原生js的图片延迟加载

    当页面图片比较多的时候,我们通常会做一个延迟加载,避免页面打开时一下子的请求数太多,加载过慢影响用户体验. 如果项目用了jquery框架,则可以直接用 jquery.lazyload.可在jquery ...

随机推荐

  1. Java基础之数据类型

    一.数据类型 基本数据类型介绍 byte 1字节 char 2字节 short 2字节 int 4字节 long 8字节 float 4字节 double 8字节 以上有Java中八大基本类型的7种, ...

  2. 9.4 Go 数据格式

    9.4 Go 数据格式 1.1. msgpack格式 官方msgpack官网用一句话总结: It’s like JSON. but fast and small. 简单来讲,它的数据格式与json类似 ...

  3. Postgres的索引01

    一.PG 9.3有以下索引类型 1.b-tree 1.1支持前导模糊查询,如xxx%或者^'xxx' 1.2忽略大小写字符前导模糊查询,如ILIKE 'XXX%'或者~*'^xxx' 1.3支持常见的 ...

  4. jQuery根据元素值删除数组元素的方法

    http://www.jb51.net/article/68349.htm 本文实例讲述了jQuery根据元素值删除数组元素的方法.分享给大家供大家参考.具体如下: 例如删除C这个元素 ,前提不知道C ...

  5. SecureCRT VBscript连接指定端口和波特率

    crt.Session.Connect "/Serial COM2 /BAUD 38400" 其它可用选项参考: crt.session.connect options https ...

  6. Kattis - entertainmentbox

    题目链接:https://vjudge.net/problem/Kattis-entertainmentbox 题目大意: 一种叫做不知道什么的盒子可以同时录 k 个节目,现给出 n 个节目的开始和结 ...

  7. 决策树purity/基尼系数/信息增益 Decision Trees

    目录 决策树简单描述 衡量purity的三种方法 Gini Coefficient Entropy熵 决策树简单描述 决策树的样子大概是这个样子的: 选择一个特征作为根节点,把这个特征划分成两个孩子节 ...

  8. Java——删除Map集合中key-value值

    通过迭代器删除Map集合中的key-value值 Iterator<String> iter = map.keySet().iterator(); while(iter.hasNext() ...

  9. 0418部分HomeWork案例

    /* 月份 输入月份,对应返回该月份的天数 利用switch的穿透性,可将多个case合到一个代码块 */ import java.util.Scanner; class HomeWork5{ pub ...

  10. 微信小程序订阅

    微信小程序订阅 摘要 1.基于promise封装微信小程序订阅 2.解决由于微信基础库版本低下的兼容 3.解决“总是保持以上选择,不再询问”的取消状态 主要运用API: requestSubscrib ...