<!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. vue上的简单轮播图

    好久没写轮播图了,今天在vue上写了个超简单的,效果还ok. .moveLeft{position:relative;right:ZOOMpx;transition:all 1s;} 原理是滚动时利用 ...

  2. redis python操作api

    redis单例数据库 #redis单例连接 ''' redis-server redis_diy.conf ''' import redis conn=redis.StrictRedis(host=' ...

  3. dij+DP

    众所周知,蒜蒜是一名热爱工作的好员工,他觉得时间就是金钱,做事情总是争分夺秒. 这天晚上,蒜蒜一个人去吃晚饭.不巧的是,吃完饭以后就开始下雨了,蒜蒜并没有带雨伞出来.但是蒜蒜热爱工作,工作使他快乐,他 ...

  4. 3、JSP中的Cookie 用于存储 web 页面的用户信息。

    cookie 在平时生活中的运用 存储用户在网页上的登陆信息,包括账号和密码. 有的网站,登陆的时候,会出现一个选项,问你是否要一周内或者一个月内保持登陆状态.如果你选了,那么一周之内,都不需要再输入 ...

  5. python_serial

    serial python中pyserial模块使用方法,pyserial模块封装了对串口的访问. 在支持的平台上有统一的接口. 通过python属性访问串口设置. 支持不同的字节大小.停止位.校验位 ...

  6. JavaScript实现栈结构

    参考资料 一.什么是栈(stack)? 1.1.简介 首先我们需要知道数组是一种线性结构,并且可以在数组的任意位置插入和删除数据,而栈(stack)是一种受限的线性结构.以上可能比较难以理解,什么是受 ...

  7. 微服务项目的docker自动化部署流程

    目录 微服务的Docker自动化部署 制作JDK1.8的Docker镜像 Docker常用命令介绍 制作image的一般流程 将本地的image上传至私人仓库 使用Maven插件实现自动化docker ...

  8. This关键字练习

    Account: package com.aff.ex; public class Account { private int id;// 账号 private double balance;// 余 ...

  9. 前端练手小项目——网页版qq音乐仿写

    qq音乐网页版仿写 一些步骤与注意事项 一开始肯定就是html+css布局和页面了,这段特别耗时间,耐心写完就好了 首先要说一下大致流程: 一定要先布局html!,所以一定要先分析页面布局情况,用不同 ...

  10. vue 中引入使用jquery

    1.首先在配置文件中添加 cnpm install  下载jquery文件 2.在webpack配置文件中添加下面代码 3.接着在webpack.base.conf.js中module.exports ...