<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            * {

                margin: 0;

                padding: 0;

                list-style: none;

            }

            ul {

                margin: 0 auto;

                position: relative;

            }

            ul li {

                width: 300px;

                position: absolute;

            }

            ul li img {

                width: 100%;

            }

        </style>

    </head>

    <body>

        <ul></ul>

    </body>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script>

        $.ajax({//请求数据

            url: 'http://rap2.taobao.org:38080/app/mock/257210/json',//请求地址

            dataType: 'JSON'//请求数据类型

        }).done(a => {//请求成功

            a = a.data

            const teep = 10,//每个li之间的间隙

                width = 300,//每个li的宽度，存起来方便以后使用

                cols = Math.floor(($(document).innerWidth()) / (width + teep)),//计算图片列数

                list = $('ul')[0].children,//动态获取ul下的子元素

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

            let num = 0//存取每一列的高度

            $('ul').css('width', cols * (width + teep))//设置ul宽度

            $(a).each((index, item) => { //遍历数据

                $('<li>').html(`<img src="${item.src}">`).appendTo('ul')//创建li

            })

            $(list).find('img').on('load', function() {//图片加载完成

                num++//每加载完成一张图片就加1

                if(num==$(list).length){//图片全部加载完成，开始设置每个li的坐标

                    $(list).each((index,item)=>{//遍历li

                        if (index < cols) {//设置第一行li的坐标

                            $(list).eq(index).css({

                                left: (width + teep) * index,

                                top: teep

                            })

                            hh.push($(list).eq(index).height() + teep*2)//添加第一行每一列li的高度到数组hh

                        } else {//设置其它li的坐标

                            let minHeight = Math.min(...hh)//获取最小高度

                            let minIndex = hh.indexOf(minHeight)//获取最小高度的索引

                            $(list).eq(index).css({

                                left: (width + teep) * minIndex,

                                top: minHeight

                            })

                            hh[minIndex]+=$(list).eq(index).height()+teep//更新最小高度

                        }

                    })

                }

            })

        })

    </script>

</html>

jQuery实现瀑布流布局的更多相关文章

  1. jQuery Wookmark 瀑布流布局

    瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...

  2. Jquery 实现瀑布流布局

    //保证img文件夹下有图片//引入jquery <script src="Script/jquery-1.7.2.js"></script> <st ...

  3. jQuery模拟瀑布流布局

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. jQuery实现瀑布流布局详解（PC和移动端）

    首先我们将如下样式的若干个单元写进body中,并将“box”向左浮动: <div class="box">  <img class="img" ...

  5. JS 瀑布流布局

    瀑布流布局 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  6. myWaterfall - jQuery瀑布流布局插件

    myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...

  7. jquery实现简单瀑布流布局（续）：图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

  8. jquery实现简单瀑布流布局

    jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...

  9. jQuery Wookmark Load 瀑布流布局实例演示

    瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...

随机推荐

  1. React:JSX 深入

    React入门的的时候,我们(我自己啦)喜欢都跟着例子来,用标签的语法写JSX,比如:<Mycomponent  key={this.props.id}  onClick={this.props ...

  2. vue的slot

    1.明确一点:分发内容是在父作用域内编译: 2.slot作为备用内容的条件:宿主元素为空且父元素没有要分发的内容. 3.具名slot:<slot name="XXX"> ...

  3. centos7 git下载速度慢

    nslookup命令 yum -y install bind-utils [root@iZ1i4qd6oynml0Z ~]# nslookup github.global.ssl.fastly.Net ...

  4. 05 返回静态文件的多线程web框架

    05 返回静态文件的多线程web框架 服务器server端python程序(多线程版): import socket from threading import Thread,currentThrea ...

  5. Django ORM性能优化之count和len方法的选择（非常详细推荐干货）

    接下来我将从源码层面分情况和应用分析我们在计算queryset数据集时是用orm的count函数计算长度还是用len函数计算数据集长度. 首先,我们知道ORM查询queryset数据集是惰性查询的,只 ...

  6. 苏浪浪 201771010120 第四周 Java基本程序设计总结

    第四章   对象与类 学习目标 掌握类与对象的基础概念,理解类与对象的关系: 掌握对象与对象变量的关系: 掌握预定义类的基本使用方法,熟悉Math类.String类.math类.Scanner类.Lo ...

  7. CF916C

    题目链接:http://codeforces.com/contest/916/problem/C 题目大意: 用\(n\)个结点,\(m\)条边(每条边的权值范围为[1, 109]) 构造出一个无向带 ...

  8. C语言数据类型整理

    基本类型: 它们是算术类型,包括两种类型:整数类型和浮点类型. 枚举类型: 它们也是算术类型,被用来定义在程序中只能赋予其一定的离散整数值的变量. void 类型: 类型说明符 void 表明没有可用 ...

  9. CSS3新子代选择器

    :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型,除了<h>标签. n 可以是数字.关键词或公式 例子一 <!DOCTYPE html> & ...

  10. 关于Tensorflow基于Windows安装那些事儿

    声明:代码及博客小白一枚,如有错误,感谢指正~~ 众所周知,摘抄来温习一遍: Tensorflow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库.节点(Nodes) ...