瀑布流
1.前端url取参数以对象展示2.el-tree在vue3中全选和展开
3.瀑布流
4.瀑布流——前端流行网页布局方式5.vue中v-bind和v-model的区别是什么6.Vue中key的作用7.在Vue 3中，与Vue 2相比，有一些改进和优化的diff算法。8.浏览器解析html9.浏览器渲染HTML10.Object.entries()11.vue实现虚拟dom转换成真是dom的原理12.全局封装组件处理并发请求不连续的loading13.为什么vue数组下标修改监听不到14.Vue 3 在某些场景下可能表现出比 Vue 2 更低的性能15.vue里表单验证的v-model.number的坑16.有意思的css17.js原生语音转文字18.js手写一个call19.js手写一个apply20. 手写一个 bind 方法21.js寄生组合式继承22.react中的useState修改状态获取最新状态值23.函数柯里化js24.axios请求中断_下载中断和下载进度25.axios请求重试_核心原理26.axios请求重试_axios-retry插件27.虚拟列表-渲染 10 万条数据28.vue-office 组件29.threejs30.把原生 DOM 标签转换后加入到 3D 场景空间中显示31.three.js 物体要使用光线投射技术，计算是否点击位置与物体有交叉32.threejs基本函数33.二分查找算法34.js判断字符串是否连贯35.世界坐标系和模型坐标系36.设置车模型中每个小物体 castShadow = true37.Vue3 echarts 组件化使用 resizeObserver38.网页验证码的作用 *网页中几种常见验证码39.多个装饰器一起es6装饰器40.flex属性41.移动端兼容问题42.那什么是URL、URI、URN？43.threejs的坐标渲染和着色44.渲染管线45.着色器46.基于 three.js 加载器分别加载模型47.echarts自适应大屏方案 亲测有用48.js中关于class类的继承49.有趣的工具50.关于threejs中鼠标左右移动，左动看右边，右动看左边51.有趣的知识点threejs52.uniapp底层跨端原理53.防止XSS（跨站脚本攻击）漏洞54.启动vite和electron项目配置多个主进程55.九宫格css56.css伪类选择器57.uniapp关于uni.getUserProfile的使用58.uniapp有意思的api之openSetting59.处理flex布局60.uniapp登录板块封装(旧接口getUserInfo)61.uniapp获取用户信息62.在项目中使用UEditor碰到的几个问题63.一维数组转二位数组64.使用此函数对数组进行分块，并在最后一组添加特定的值65.如果win报错无法加载文件 C:\Users\xx\AppData\Roaming\npm\pnpm.ps1，因为在此系统上禁止运行脚本66.win系统执行脚本报错策略更改无法加载文件 C:\Users\xx\AppData\Roaming\npm\pnpm.ps1，因为在此系统上禁止运行脚本67.阅读时间缓存（快应用）68.uniapp去除button的边框69.uniapp中OnShow获取缓存70.js图片懒加载，在不做分页的情况下的解决方案71.width:100%与width:auto区别72.leetcode1047字符串反复去重（栈）73.记录一次uniapp使用scrollview74.微前端(矩阵项目)代码将单个文件合并到指定分支75.自适应高度的过渡76.实现下划线动画77.js不同类型比较78.登录后继续浏览之前的页面79.sse80.关于小说阅读前端翻页插件推荐turn.js81.数组扁平化82.好玩的vue组件83.DOMRect对象84.前端三大系列图解释85.js中关于return和if条件处理86.关于文心一言不能打开F12开发者工具87.js文字处理两端展示中间省略号88.[popover, select] el-popover内有select的时候在选择后会自动关闭89.说一下flex的属性90.vue3中404路由匹配规则91.shape-outside92.createRange表示文档中的一个范围——用于js判断文字添加省略号情况93.uniapp清除指定key缓存94.vue3+uniapp关于button的open-type无法生效95.uniapp+vue3 使用list触底+下拉96.diff算法vue97.动态修改manifest.json98.记录一下大小写导致的问题点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>瀑布流布局</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #ccc;
}
.box {
margin: 0 auto;
position: relative;
}
.item {
position: absolute;
}
img {
border-radius: 8px;
border: 1px solid #999;
padding: 10px;
background-color: #fff;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">
</div>
<script>
// 获取图片数据
var imgData = `{
"data": [
{ "src": "i1.jpg" },
{ "src": "i2.jpg" },
{ "src": "i3.jpg" },
{ "src": "i4.jpg" },
{ "src": "i5.jpg" },
{ "src": "i6.jpg" },
{ "src": "i7.jpg" },
{ "src": "i8.jpg" },
{ "src": "i9.jpg" },
{ "src": "i10.jpg" },
{ "src": "i11.jpg" },
{ "src": "i12.jpg" },
{ "src": "i13.jpg" },
{ "src": "i14.jpg" },
{ "src": "i15.jpg" }
]
}`;
// 将JSON数据转换为JS对象
var imgData = JSON.parse(imgData);
// 将图片渲染到页面中
var str = '';
for (var i=0; i<imgData.data.length; i++) {
str += `<div class="item"><img src="img/${imgData.data[i].src}" /></div>`;
}
// 获取页面中的box容器
var box = document.querySelector('.box');
box.innerHTML = str;
window.onload = function() {
waterfall();
};
// 更改窗口尺寸时，重新计算并渲染列
window.onresize = function() {
waterfall();
};
window.onscroll = function() {
var res = scrollFn();
if (res) {//如果到了最后一张图
// 获取box容器
var box = document.querySelector('.box');
// 再创建一些新的item和里面的内容，并将它们渲染到页面
for (var i=0; i<imgData.data.length; i++) {
// 创建图片（利用Image构造方法创建）
var img = new Image();
img.src = 'img/' + imgData.data[i].src;
// 创建图片的容器，即item
var div = document.createElement('div');
div.className = 'item';
div.appendChild(img);
box.appendChild(div);
}
// 调用waterfall方法，对新创建的item进行排列
waterfall();
}
};
// 定义一个方法，该方法的作用是对页面中的图片进行排列
function waterfall() {
// 获取页面中的所有的item
var items = document.querySelectorAll('.item');
// 获取item的宽度(注意：item的宽度是一样)
var itemWidth = items[0].offsetWidth;
// 获取视口的宽度
var bodyWidth = document.documentElement.clientWidth || document.body.clientWidth;
// 计算一行中可以容纳下多少个item
var num = Math.floor(bodyWidth / itemWidth);
// 设置box容器的宽度，使box可以水平居中
box.style.width = num * itemWidth + 'px';
// 定义一个数组，该数组的作用是用来存储每列的高度
var itemHeight = [];
// 将页面中的item进行位移，即重新排列图片的位置
for (var i=0; i<items.length; i++) {
if (i < num) {// 第一行
items[i].style.top = 0; // 第一行的top都是0
items[i].style.left = itemWidth * i + 'px';
// 获取每一列的高度，将高度放在数组itemHeight中
itemHeight.push(items[i].offsetHeight);
} else {
// 获取最小的列高
var minItemHeight = Math.min.apply(null, itemHeight); // 282
// 根据最小高度，获取其下标
var index = itemHeight.indexOf(minItemHeight);
// 将当前的item的位置进行设置
items[i].style.left = items[index].offsetLeft + 'px'
items[i].style.top = minItemHeight + 'px';
// 重新设置列的高度
itemHeight[index] = minItemHeight + items[i].offsetHeight;
}
}
}
// 定义一个方法，该方法的功能是判断最后一张图是否已经显示了，如果显示了，需要往页面中添加新的内容
function scrollFn() {
// 获取当拉动滚动条时被卷上去的内容的高度
var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// 获取视口的高度
var bodyHeight = document.documentElement.clientHeight || document.body.clientHeight;
// 获取最后一个item距离顶端的偏移量
var items = document.querySelectorAll('.item');
var lastItem = items[items.length - 1].offsetTop;
// 判断拉动滚动条时是否显示到了最后一张图
if (bodyScrollTop + bodyHeight > lastItem) {
return true;
}
}
</script>
</body>
</html>
本文来自博客园，作者：jialiangzai，转载请注明原文链接：https://www.cnblogs.com/zsnhweb/articles/17680083.html
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现