<!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. 前端ie7的兼容问题及解决方案（未完待续）

    最近在维护一些老的项目,需要兼容ie7 ,css3就不能用了,这里总结一下碰到的问题及解决方案. 1.盒模型 ie7.8  的盒模型都是 box-sizing为content-box的盒模型,这里在做 ...

  2. 【Python代码】TSNE高维数据降维可视化工具 + python实现

    目录 1.概述 1.1 什么是TSNE 1.2 TSNE原理 1.2.1入门的原理介绍 1.2.2进阶的原理介绍 1.2.2.1 高维距离表示 1.2.2.2 低维相似度表示 1.2.2.3 惩罚函数 ...

  3. 微信小程序入门知识点总结

    微信小程序入门知识点总结 前情介绍 ​ 微信小程序就不多介绍了,我们想要开发微信小程序首先得到微信公众平台 下方的小程序处注册相关账号并登录,接着填写小程序相关资料.在设置处可找到AppID用以开发微 ...

  4. Django模板之模板标签

    标签比变量更加复杂:一些在输出中创建文本,一些通过循环或逻辑来控制流程,一些加载其后的变量将使用到的额外信息到模版中. 一些标签需要开始和结束标签 (例如:{% tag %} ...标签 内容 ... ...

  5. CSS类与选择器【转】http://www.cnblogs.com/duanhuajian/archive/2012/12/17/2821524.html

    1.在 HTML 中,一个 class 值中可能包含一个词列表,各个词之间用空格分隔.例如,如果希望将一个特定的元素同时标记为重要(important)和警告(warning),就可以写作(这两个词的 ...

  6. redis学习——day01_redis简介与安装

    一.Redis 简介 1.1 Redis是什么 REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统.Redi ...

  7. BZOJ 1084DP

    1084: [SCOI2005]最大子矩阵 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2796  Solved: 1391[Submit][Sta ...

  8. SpringBoot瘦身

    1.介绍 本教程中,我们将研究如何使用spring-boot-thin-launcher项目来将Spring Boot项目瘦身. Spring Boot出了名的把所有依赖打包成单个可执行的Fat JA ...

  9. linux 权限笔记

    权限模型 linux权限模型,指的是对文件.文件夹同的读写权限,同用户之间的权限管理模型 三种角色 user 文件.文件夹的创建者,所有人 group 一个group对应多个user,user自动具有 ...

  10. Java学习大纲-0412更新

    非科班报培训班学习Java,从博客园,知乎,CNDS上搜了一圈,暂时按以下计划执行,有问题随时更新--0412 1.培训班的课程按时按点学习完成(毕竟掏钱在学的是不,不好好听亏不亏...) keys: ...