<!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. Spring Boot集成H2数据库

    需求 平时学习的时候,涉及到一些连接数据库相关的操作,经常需要初始化本地数据库,比如装个MySQL,初始化一些脚本,比较麻烦,H2是内存数据库,Spring Boot可以在应用启动的时候对H2数据库初 ...

  2. 【比较】遗传算法GA和遗传编程GP有什么不同？

    遗传算法GA 本质上有一个固定的长度,这意味着所产生的功能有限的复杂性 通常会产生无效状态,因此需要以非破坏性方式处理这些状态 通常依赖于运算符优先级(例如,在我们的例子中,乘法发生在减法之前),这可 ...

  3. MySQL银行ATM存取款机系统（需求分析）

    银行ATM需求文档 一．E-R图形文 二.开发步骤 1.明确需求--数据库设计--编码实现功能--测试 2.绘制e-r图--绘制数据库模型图--使用三大方式规范数据库结构 三．开发思路 1. 模型图综 ...

  4. scrapy框架简介与安装启动

    Scrapy 是一个专业的.高效的爬虫框架,它使用专业的 Twisted 包(基于事件驱动的网络引擎包)高效地处理网络通信,使用 lxml(专业的 XML 处理包).cssselect 高效地提取 H ...

  5. python学习（12）使用正则表达式

    1.正则表达式知识 符号 解释 示例 说明 . 匹配任意字符 b.t 可以匹配bat / but / b#t / b1t等 \w 匹配字母/数字/下划线 b\wt 可以匹配bat / b1t / b_ ...

  6. 枚举 转化为可行性判定问题 网络流 poj3189

    Steady Cow Assignment Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6914   Accepted: ...

  7. excel2007灵活计算2个日期之间的工作日

    C1单元格公式:=NETWORKDAYS(A1,B1,$F$2:$F$10)+COUNTIFS($I$2:$I$3,">="&A1,$I$2:$I$3,"& ...

  8. ES[7.6.x]学习笔记（十）聚合查询

    聚合查询,它是在搜索的结果上,提供的一些聚合数据信息的方法.比如:求和.最大值.平均数等.聚合查询的类型有很多种,每一种类型都有它自己的目的和输出.在ES中,也有很多种聚合查询,下面我们看看聚合查询的 ...

  9. 简说Spring中的资源加载

    声明: 本文若有 任何纰漏.错误,请不吝指正!谢谢! 问题描述 遇到一个关于资源加载的问题,因此简单的记录一下,对Spring资源加载也做一个记录. 问题起因是使用了@PropertySource来进 ...

  10. 【SocketIoClientDotNet】Nuget包安装问题

    问题: Nuget安装[SocketIoClientDotNet]失败 错误信息: Operation failed Expected 1 export(s) with contract name & ...