<!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. mysql安装之后需要调的参数

    http://www.mysqlperformanceblog.com/2014/01/28/10-mysql-settings-to-tune-after-installation/ 翻译加深理解. ...

  2. MySQLdb安装记

    1 安装 python-devel 2. site.cfg 改mysql_config成实际位置 mysql_config = /mysqldata/mariadb530/bin/mysql_conf ...

  3. 汇编语言 简单的Hello World

    DATA SEGMENT STRING DB 'Hello World!','$' DATA ENDS CODE SEGMENT ASSUME CS:CODE, DS:DATA START: MOV ...

  4. AJAX一

    一.http协议 1.URL http://www.baidu.com/md/index.html 结构:协议+主机名称+目录结构+文件名称 URL完整的结构 <scheme>://< ...

  5. SVN:TortoiseSVN SendRpt.exe not found 完美解决

    今天来上班的时候,发现公司用的svn版本和我自己的不一致,其实可以使用但是还是神经质的更新了一下.结果每次右键都会出一个异常.下图所示. 期初以为是哪里配置错误,或者版本冲突,经过网上查找办法,完美解 ...

  6. 解决删除~/Library/Caches/CocoaPods/search_index.json重新pod search还是不起作用

    今天新苹果机安装cocoapods,安装完以后发现怎么pod search 都没有用 命令行提示: swhcxp@iosdevmac ~ % pod search Almofire Setup com ...

  7. UVA11038

    题目大意:见刘汝佳<算法竞赛入门经典——训练指南>P173 解题思路: 求出 0 到 m-1 这些数字中 0 出现的次数(此处要特判 m = 0 的情况),再求出 0 到 n 这些数字中 ...

  8. 27-1 分组-having

    group by select * from TblStudent --1.请从学生表中查询出每个班的班级id和班级人数 select tsclassId as 班级id, 班级人数=count(*) ...

  9. Algorithms - Data Structure - Perfect Hashing - 完全散列

    相关概念 散列表 hashtable 是一种实现字典操作的有效数据结构. 在散列表中,不是直接把关键字作为数组的下标,而是根据关键字计算出相应的下标. 散列函数 hashfunction'h' 除法散 ...

  10. c# 优化代码的一些规则——优先隐式类型[一]

    前言 说到底就是优先使用var,这个关键字,在c# 3.0中出现了. 首先要确认几点,一个就是var 是静态变量,而不是动态变量,也就是说使用var 你是不必去担心性能问题得, 百度百科: 1)静态存 ...