jQuery实现瀑布流布局
时间:2020-06-10
本文章向大家介绍jQuery实现瀑布流布局,主要包括jQuery实现瀑布流布局使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!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>
原文地址:https://www.cnblogs.com/zlf1914/p/13087846.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- VMware 安装运行 deepin 虚拟机 | 体验中国深度
- 单机KVM虚拟化快照定时创建删除快照
- 批量ping脚本
- 批量ssh信任脚本
- Oracle表级备份
- Linux脚本运行报错解决方法 bad interpreter: No such file or directory
- MySQLdump里的秘密,终于被我发现了
- HTTP各种特性总览
- django查询今天,昨天,一周,分组统计月,年
- 关于 z-index,你可能一直存在误区
- Java浮点数机制及所存在的问题
- SAP UI5和React的页面渲染性能比较
- SAP CDS view自学教程之一:如何测试基于SAP CDS view自动生成的OData服务
- SAP CDS view自学教程之二:当SAP CDS view被激活时,背后发生了什么
- SAP Fiori Elements原理介绍之类型为Value Help的Smart Field工作原理