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 ...
随机推荐
- Angular的面试题
1.Aangular中组件之间通信的方式 答案:Props down 1.调用子组件,通过自定义属性传值 2.子组件内部通过Input来接收属性的值 Events up 1.在父组件中定义一个有参数 ...
- JS 如何获取自定义属性
<script>var testEle = document.getElementById("test"); testEle.setAttribute("de ...
- 【Mac】pip自定义源【永久有效】
鉴于国内网络环境,pip安装比较慢已成为不争的事实,通过以下几步轻松解决 1.创建文件夹 mkdir -/.pip 2.创建配置文件 vim -/.pip/pip.conf mkdir ~/.p ...
- Mysql添加更新删除数据-表
例如 此处拥有一个表名为 uuser 为表添加新数据 ,'); ,'); ,'); 假如只想添加uid和uname ,'小张'); 那么pas自动填充为NULL. 为表更新数据 这里把小王的pas改成 ...
- Kubernetes学习笔记（六）：使用ConfigMap和Secret配置应用程序
概述 本文的核心是:如何处理应用程序的数据配置. 配置应用程序可以使用以下几种途径: 向容器传递命令行参数 为每个容器配置环境变量 通过特殊的卷将配置文件挂载到容器中 向容器传递命令行参数 在Kube ...
- Python之Flask框架一
flask是一个使用 Python 编写的轻量级 Web 应用框架.轻巧页就意味着他比较简洁,不过见到的MTV框架还是有的,(MVC)但是最重要的还是他的可扩展性很强,对比与Django框架呢,他的灵 ...
- Docker容器启动时初始化Mysql数据库
1. 前言 Docker在开发中使用的越来越多了,最近搞了一个Spring Boot应用,为了方便部署将Mysql也放在Docker中运行.那么怎么初始化 SQL脚本以及数据呢? 我这里有两个传统方案 ...
- 使用PInvoke互操作，让C#和C++愉快的交互优势互补
一:背景 1. 讲故事 如果你常翻看FCL的源码,你会发现这里面有不少方法借助了C/C++的力量让C#更快更强悍,如下所示: [DllImport("QCall", CharSet ...
- [Chrome插件开发]001.入门
Chrome插件开发入门 Chrome扩展文件 Browser Actions(扩展图标) Page Actions(地址栏图标) popup弹出窗口 Background Pages后台页面 实战讲 ...
- 小工具之apk黑屏自动检测
在打包测试的时候经常发送给测试组之后,发现已进入游戏就黑屏,这个就浪费了测试组的精力,如果要测试多款产品的话,就会因为黑屏问题做很多无用功,这是程序就需要在发给测试的时候自己先测试产品会不会黑屏.同样 ...