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>
jQuery实现瀑布流布局的更多相关文章
- jQuery Wookmark 瀑布流布局
瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...
- Jquery 实现瀑布流布局
//保证img文件夹下有图片//引入jquery <script src="Script/jquery-1.7.2.js"></script> <st ...
- jQuery模拟瀑布流布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- jQuery实现瀑布流布局详解（PC和移动端）
首先我们将如下样式的若干个单元写进body中,并将“box”向左浮动: <div class="box"> <img class="img" ...
- JS 瀑布流布局
瀑布流布局 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- myWaterfall - jQuery瀑布流布局插件
myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/ ...
- jquery实现简单瀑布流布局（续）：图片懒加载
# jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...
- jquery实现简单瀑布流布局
jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...
- jQuery Wookmark Load 瀑布流布局实例演示
瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...
随机推荐
- 初涉WebGL
之前一直在捣鼓Vue和React栈,对组件化架构项目有了些理解和体会.今天尝尝WebGL,当然,并不打算现在深入,只是略作了解,我知道这个坑很深. js的图形库.3d库也有好几款比较流行的,如游戏开发 ...
- Redis设计原理简介
学完MySQL InnoDB之后,又开始学习和研究Redis. 首先介绍下书:<Redis设计与实现>第二版 黄健宏著,机械工业出版社,388页,基于redis3.0版本.版本有点低,这个 ...
- 马兴德201771010117《面向对象程序设计（java）》第一周学习总结
第一部分:课程准备部分 填写课程学习 平台注册账号, 平台名称 注册账号 博客园:www.cnblogs.com 挽歌朽年 程序设计评测:https://pintia.cn/ 791683057@qq ...
- Spring Boot 教程(2) - Mybatis
Spring Boot 教程 - Mybatis 1. 什么是Mybatis? MyBatis 是一款优秀的持久层框架,它支持自定义 SQL.存储过程以及高级映射.MyBatis 免除了几乎所有的 J ...
- python+selenium 自动化测试框架-学习记录
本人小白一枚,想着把学习时的东西以博客的方式记录下来,文章中有不正确的地方请大佬多多指点!!共同学习 前期准备 安装python3.selenium.下载对应版本的webdriver:安装所需的第三 ...
- Linux下VCS2014和Verdi2015的联合使用
VCS和Verdi是IC设计中常用的两款开发工具.VCS是Synopsys公司的产品,和大家所熟知的ModeSim一样的都是EDA仿真工具.Verdi是Nocas公司(已经被Synopsys公司收购) ...
- Docker虚拟机配置手札（centos）
一.Docker只支持CentOS7及以上系统,不支持6.x系统 二.yum安装Docker 1.安装相关环境和设置仓库 yum install -y yum-utils device-mapper- ...
- Win10下安装Linux子系统-Ubuntu
工作以来一直DotNet系偏C/S, 接触Web开发的时间也不长, 现在主要偏向Web全栈方向, 一直对Linux系统心生向往, 夜深了娃睡了, 打开老旧的笔记本来折腾一下. 准备工作 控制面板 &g ...
- Android_存储访问框架SAF
概念 存储访问框架---Storage Access Framework (SAF),这是在Android4.4(API level 19)之后引入的. 借助 SAF,用户可轻松在其所有首选文档存储提 ...
- 【C++】运算符优先级和结合性
从上表可以大致总结这样一个规律: 优先级 运算符 高 初等运算符 | 单目运算符 | 算术运算符(先乘除,后加减) | 关系运算符 | 逻辑运算符(不包括!) | 条件运算符 ↓ 赋值运算符 低 逗号 ...