瀑布流实现原理（ jQuery 实现 ）
1.什么是瀑布流、
为什么要使用瀑布流：由于图片尺寸的大小不同，我们为了用最合适的比例来展示图片，就需要让图片自己去确定最终的高度。但是图片自定义高度会使得每一项的高度不一致而使页面显得混乱，故我们可以使用瀑布流来确定元素的定位位置。
瀑布流的定义：元素自判断显示区域中，那一列的高度最低，则在那一列显示。
2.瀑布流具体原理
（1）. 根据数据库数据创建每一个图片卡片
data.forEach(element => {// 【创建该项节点】let model = $(`<div class="item"><img src="data:images/pic/${element['id']}.jpg" class="bigImg" /><div class="bottom_box"><p>${element['text']}</p><div class="user_box"><div class="left"><img src="data:images/touxiang/${element['id']}.jpg" class="user_img" /><span class="username">${element['uname']}</span></div><div class="right"><img src="data:images/heart.png" class="heart" /><span class="num">${element['collect']}</span></div></div></div></div>`);$('.box').append(model);})
（2）. 对每一个图片卡片进行布局
// 由于代码执行顺序问题，刚刚创建完的节点还未加载 img 图片// 如果直接设置布局，达不到想要的效果window.onload = function () {// 【一.准备工作】// 1.1-设置列数const column = 5;// 1.2-定义每个项的间距const gap = 18;// 1.3-定义一个数组保存每列高度，初始化为 0let arrHeight = [];for (let i = 0; i < column; i++) {arrHeight.push(0)}// 【二.遍历每项】$('.item').each((index, model) => {// 2.1- 判断每列高度最小值 及其 索引// 求最小值let minHeight = Math.min(...arrHeight);// 最小值索引let minIndex = $.inArray(minHeight, arrHeight);// 2.2- 设置该项定位位置 top - left$(model).css({top: minHeight + gap,left: ($(model).outerWidth() + gap) * minIndex,})// 2.3- 更新该添加列的高度值arrHeight[minIndex] = minHeight + gap + $(model).outerHeight();});}
3.源码展示
布局
HTML部分
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/init.css">
</head><body><div class="box"></div>
</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/data.js"></script>
<script src="./js/element.js"></script></html>
- CSS部分
*{margin: 0;padding: 0;
}
img{vertical-align: bottom;
}
.box{width: 1180px;margin:50px auto;position: relative;
}
.box .item{width: 220px;border:1px solid #ccc;border-radius: 8px;overflow: hidden;position: absolute;left: 0;top: 0;
}
.box .item .bigImg{width: 100%;
}
.box .item .bottom_box{height: 80px;padding:15px;
}
.box .item .bottom_box .user_box{margin-top: 15px;
}
.box .item .bottom_box .user_box .left{float: left;
}
.box .item .bottom_box .user_box .right{float: right;
}
.box .item .bottom_box .user_box .user_img{width: 30px;height: 30px;border-radius: 50%;margin-right: 10px;vertical-align: middle;
}
.box .item .bottom_box .user_box .username{font-size:12px;color:#555555;
}
.box .item .bottom_box .user_box .heart{height: 16px;vertical-align: middle;
}
.box .item .bottom_box .user_box .num{font-size:12px;color:#555555;
}.box .item::after{width: 100%;height: 100%;background-color: rgba(0,2,4,.2);position: absolute;top: 0;left: 0;border-radius: 8px;content: "";cursor: pointer;display: none;
}
.box .item:hover::after{display:block;
}
.more{color:#ff2741;text-align: center;height: 100px;line-height: 100px;font-weight: bold;cursor: pointer;
}
- JQ插件请自行下载
- JS-data部分
let data = [{ id: '01', text: '拥有一台宾利GT，如何拍，才不会被说炫富？', uname: '金英焕', collect: '102' },{ id: '02', text: '
瀑布流实现原理（ jQuery 实现 ）相关推荐
- 动态瀑布流网页布局 Jquery 源码
动态瀑布流网页布局jQuery代码,效果超酷,自适应网页宽度,动态缩略图排列效果, 本代码包含两种演示效果, 一种是缩略图布局效果 一种是文字布局效果 下载地址: http://download.cs ...
- jQuery实现响应式瀑布流效果（jQuery+flex）
瀑布流原理:是一种常见的网页布局方式,它的特点是将内容以多列的形式呈现,每一列的内容高度不固定,根据内容的大小自适应调整,从而形成了像瀑布一样的流动效果. 瀑布流的实现原理涉及到数据加 ...
- 堆糖瀑布流完整解决方案(jQuery)
2010年堆糖创办以来,网站界面经历过3-5次重大改版,logo也曾更换过两次,早期蓝红相间三个圈的logo恐怕很少有人记得了.与此同时,前端 js 框架也在默默的更新换代.最早堆糖上线时,js 采用 ...
- waterfall-Jquery瀑布流插件，Jquery瀑流式插件
瀑布流插件布局在目前貌似很火爆,因为自己用jquery插件比较多,便萌生了把瀑布流插件实现的想法,图片就借用迅雷UED上的那些美图吧. 预览地址:http://www.sitejs.cn/code/d ...
- 自己用jQuery写一个瀑布流
自己用jQuery写一个瀑布流 前言 这个月一直在忙工作.一直没有机会学习新的知识.前两天,突然想写一个瀑布流代码.倒不是找不到瀑布流代码.而是我想自己练练脑子. 首先,先考虑思路.所有的图片,全部采 ...
- masonry ajax瀑布流,jquery.masonry瀑布流插件的4个使用步骤
解释:很简单,就是把下载之后的脚本文件嵌入到你想使用2.瀑布流布局样式代码 .container-fluid { padding: 20px; } .box { margin-bottom: 20px ...
- 网页瀑布流效果实现的几种方式
前言 like a mountain that is in our path,wo cannot complain that it is there,we simply have to climb i ...
- AJAX异步实现简单的瀑布流
传统瀑布流布局ul-li,需要先设定显示几列,每列是一个li,需要左浮动并指定宽度,li里面的布局也要先布局好,主要是要定宽,高度自动:然后通过ajax异步,从数据库中得到数据,遍历后将数据插入最矮的 ...
- 瀑布流代码PHP,thinkPHP实现瀑布流的方法
本文实例讲述了thinkPHP实现瀑布流的方法.分享给大家供大家参考.具体分析如下: 很多人都想做瀑布流的效果,这里告诉大家官网使用的方法,首先要下载瀑布流的插件jquery.masonry.min. ...
最新文章
- 聊聊iOS开发中耳机的那点事(监听耳机拔插、耳机线控)-b
- libopencv_core.so: file not recognized: File format not recognized
- 【Android 高性能音频】Oboe 播放器开发 ( 为 OpenSL ES 配置参数以获得最佳延迟 | Oboe 音频流 | Oboe 音频设备 )
- 给书配代码-电力经济调度（4）：有功与辅助服务联合经济调度
- 请看:我是如何在SQLServer中处理每天四亿三千万记录的
- React开发（117）:ant design 新方式
- 红米k30pro工程测试代码_3299起？红米K30Pro官宣3.24发 对比米10 追悼会来了？
- Python常用网站
- python布局管理数据_利用python创建窗口-布局管理器（五）
- MYSQL主从同步(主库服务器为Linux，从库为Windows)
- SSM（Spring+springMVC+MyBatis）框架-springMVC实现图片上传
- IDEA集成有道翻译插件/maven帮助插件/mybatis插件
- 软件需求，概要设计，详细设计（文档）怎么做，做什么？
- JAVA后端调用微信支付“统一下单”接口实现微信二维码扫码支付
- DHCP中继 ||| 四种通信方式（单播+组播+广播+任播）
- 互联网周刊2022汽车智能服务企业TOP50
- matlab右下方箭头,matlab绘制箭头arrow
- oracle修改表的owner,Oracle中改变表的Owner和tablespace
- Vim使用全指南 (环境配置，插件推荐，美化) (C++,Python,MarkDown,R...)
- xxl-job的学习使用
热门文章