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 ...
随机推荐
- 「雕爷学编程」Arduino动手做（20）—水银开关模块
37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践出真知(一定要动手做)的理念,以学习和交流为目的,这里 ...
- 【Python代码】混合整数规划MIP/线性规划LP+python(ortool库)实现
目录 相关知识点 LP线性规划问题 MIP混合整数规划 MIP的Python实现(Ortool库) assert MIP的Python实现(docplex库) 相关知识点 LP线性规划问题 Linea ...
- ABAP基础1：概念
包(Package)也称作开发类,是为了将程序等对象根据功能划分,进行区分和管理而导入的概念 每一个开发对象,如程序.类,都要隶属一个包,包一般隶属于某一个模块 每个包拥有一个CTS号,CTS号用于系 ...
- 使用CountDownLatch等待多线程
前言 CountDownLatch 允许一个或多个线程等待其他线程完成操作. 应用场景 假如有一个列表的大量数据等待处理,最后全部处理完毕后返回处理结果.普通做法就是从头遍历,一个个顺序执行,这 ...
- 蓝桥杯 试题 历届试题 填字母游戏 博弈+dfs剪枝
问题描述 小明经常玩 LOL 游戏上瘾,一次他想挑战K大师,不料K大师说: “我们先来玩个空格填字母的游戏,要是你不能赢我,就再别玩LOL了”. K大师在纸上画了一行n个格子,要小明和他交替往其中填入 ...
- 公众号使用微信sdk的正确姿势
当我们做微信登录授权,微信公众号的分享,微信的h5支付等等等等的时候难免会用到微信sdk,当我们用react或vue做的spa应用,直接引入后会发现,在按安卓上可以正常调试,而ios上一直报签名错误( ...
- java三个时间类常用法
1.System.currentTimeMillis(); 获取当前时间戳 System的获取时间戳的方法,只能获取不能进行其他的操作,简单的毫秒计算可以使用 2.Date(),Date( ...
- 一文带你学会基于SpringAop实现操作日志的记录
前言 大家好,这里是经典鸡翅,今天给大家带来一篇基于SpringAop实现的操作日志记录的解决的方案.大家可能会说,切,操作日志记录这么简单的东西,老生常谈了.不! 网上的操作日志一般就是记录操作人, ...
- [C# WPF] 关于将文本框竖起来（旋转文字）
xx.xmal.cs 后台代码中动态添加控件到 UI 文字显示在一个 Canvas 中(定位用Canvas.SetLeft() / Canvas.SetTop() ), 为了实现排版效果,可适当在 T ...
- 四、Spring-面向切面编程
内容 面向切面编程基本原理 通过POJO创建切面 使用@AspectJ注解 为AspectJ切面注入依赖 关键词 横切关注点(cross-cutting concern) 继承 (inheritanc ...