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 ...
随机推荐
- Flutter仿掘金点赞效果
老孟导读:今天分享一下如何实现掘金点赞效果,这不仅仅是一篇技术文章,还是一篇解决问题思路的文章,遇到一个需求时,如何拆分需求,然后一步一步实现,这个过程比单纯的技术(此文)更有含金量. 先来看一下掘金 ...
- 对比Memcached和Redis，谁才是适合你的缓存？
Memcached vs Redis 近期公司采购软件,评估时,某软件谈到使用了 Memcached 和 Redis 缓存.在本文中,将研究这两个流行的缓存的异同,方便理解和记忆. 1. Memcac ...
- python list 与 String 互相转换
str0 = '127.0.0.1' list0 = str0.split('.') print(list0) #['127', '0', '0', '1'] str1 = '#'.join(list ...
- Angular SPA基于Ocelot API网关与IdentityServer4的身份认证与授权（三）
在前面两篇文章中,我介绍了基于IdentityServer4的一个Identity Service的实现,并且实现了一个Weather API和基于Ocelot的API网关,然后实现了通过Ocelot ...
- Robot Framework（3）- 基本概念
如果你还想从头学起Robot Framework,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1770899.html 前言 在 RF ...
- iOS 的尾调用优化原理
背景: 今天聊代码规范的问题的时候说了一下尾调用的问题. 一:概念: 什么是尾调用? 尾调用(Tail Call):某个函数的最后一步仅仅只是调用了一个函数(可以是自身,可以是另一个函数). 注意 “ ...
- 初识Mysql 外键
1.创建学生表(主表) CREATE TABLE `stu` ( `stunum` int(10) NOT NULL AUTO_INCREMENT, `name` varchar(255) NOT N ...
- 项目工程化之git提交规范以及 CHANGELOG生成
事先声明,本文是参考了其他大神的博客之后自己尝试的记录,具体可以参考如下 链接 先说说git 提交规范把,这里基本都是这个工具 cz-customizable 1,安装 npm install cz- ...
- OpenStack的Trove组件详解
一:简介 一.背景 1. 对于公有云计算平台来说,只有计算.网络与存储这三大服务往往是不太够的,在目前互联网应用百花齐放的背景下,几乎所有应用都使用到数据库,而数据库承载的往往是应用最核心的数 ...
- 【QT】利用pyqt5实现简单界面
Topic: 利用pyqt5编写简单界面Env:win10 + Pycharm2018 + Python 3.6.8Date: 2019/4/29 by hw_Chen2018 ...