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 ...
随机推荐
- flask之jinjia2模板语言
flask_jinjia2.py ''' flask中的jinjia2模板语言(和django中模板类似): (1)模板变量{{ }} (2)模板标签{% %} ①for循环遍历 {% for foo ...
- MYSQL mysql.user表中权限对应的解释
命令标识 授权表中对应的列 说明 CREATE Create_priv 创建数据库.表或索引 CREATE TEMPORARY TABLES Create_tmp_table_priv 创建临时数据表 ...
- 关于Android的真机测试
步骤: 1.开启手机USB调试 2.数据线连接手机和电脑 3.eclipse需要重启 4.在eclipse的run里面的runconfig...里面设置为启动时总是提醒开发者选择 具体事例: 我的手机 ...
- 201771010120 苏浪浪 面向对象程序设计（Java）第10周
1.实验目的与要求 (1) 理解泛型概念: (2) 掌握泛型类的定义与使用: (3) 掌握泛型方法的声明与使用: (4) 掌握泛型接口的定义与实现: (5)了解泛型程序设计,理解其用途. 2.实验 ...
- poj3613 求经过n条边的最短路 ----矩阵玩出新高度 。
For their physical fitness program, N (2 ≤ N ≤ 1,000,000) cows have decided to run a relay race usin ...
- 21-8 数据检索2 top和distinct
--distinct关键字,根据已经查询出的结果然后去除重复 select distinct * from TblStudent --Top(一般会配合order by一起使用) ---------- ...
- centos8.0安装docker & docker-compose
centos8.0安装docker&docker-compose 背景简介: 现在centos已经到了8 ,一直在接触容器方面,为了尝鲜,下载了CentOS8,并尝试安装docker& ...
- 掌握了Docker Layer Caching才敢自称精通Dockerfile
长话短说: 本次原创将向您展示在Docker中使用Layer Cache以加快镜像构建. 这个话题的初衷在于:应用程序打包过程是很慢的(下载并安装框架&第三方依赖包.生成assets),这在D ...
- Nginx 实现 HTTPS（基于 Let's Encrypt 的免费证书）
SSL / TLS加密会为您的用户带来更高的搜索排名和更好的安全性. Let’s Encrypt 是一个认证机构(CA).它可以提供免费证书,并且已经被大多数浏览器所信任.另外,通过工具 Certbo ...
- 【SocketIoClientDotNet】Nuget包安装问题
问题: Nuget安装[SocketIoClientDotNet]失败 错误信息: Operation failed Expected 1 export(s) with contract name & ...