分别使用JS和JQuery实现瀑布流以及追加效果

2024-04-21 09:32
文章标签 javascript 分别 实现 使用 js 效果 jquery frontend 追加 瀑布

本文主要是介绍分别使用JS和JQuery实现瀑布流以及追加效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

分别使用JS和JQuery实现瀑布流以及追加效果

  • 效果图
  • html
  • css/style.css
  • js实现瀑布流
  • jquery实现瀑布流
  • js和jquery对比代码
  • jquery实现瀑布追加的效果

效果图

在这里插入图片描述
在这里插入图片描述

html

<!DOCTYPE html>
<html lang="en" dir="ltr"><head><meta charset="utf-8"><title>瀑布流</title><link rel="stylesheet" href="css/style.css"></head><body><div id="wrap"><div><img src="images/1.png"><a href="#">第一怪 竹筒当烟袋</a></div><div><img src="images/2.png"><a href="#">第二怪 草帽当锅盖</a></div><div><img src="images/3.png"><a href="#">第三怪 这边下雨那边晒</a></div><div><img src="images/4.png"><a href="#">第四怪 四季服装同穿戴</a></div><div><img src="images/5.png"><a href="#">第五怪 火车没有汽车快</a></div><div><img src="images/6.png"><a href="#">第六怪 火车不通国内通国外</a></div><div><img src="images/7.png"><a href="#">第七怪 老奶爬山比猴快</a></div><div><img src="images/8.png"><a href="#">第八怪 鞋子后面多一块</a></div><div><img src="images/9.png"><a href="#">第九怪 脚趾四季露在外</a></div><div><img src="images/10.png"><a href="#">第十怪 鸡蛋拴着卖</a></div><div><img src="images/11.png"><a href="#">第十一怪 粑粑叫饵块</a></div><div><img src="images/12.png"><a href="#">第十二怪 花生蚕豆数着卖</a></div><div><img src="images/13.png"><a href="#">第十三怪 三个蚊子一盘菜</a></div><div><img src="images/14.png"><a href="#">第十四怪 四个老鼠一麻袋</a></div><div><img src="images/15.png"><a href="#">第十五怪 树上松毛扭着卖</a></div><div><img src="images/16.png"><a href="#">第十六怪 姑娘叫老太</a></div><div><img src="images/17.png"><a href="#">第十七怪 小和尚可以谈恋爱</a></div><div><img src="images/18.png"><a href="#">第十八怪 背着娃娃谈恋爱</a></div></div></body><!-- js --><!-- <script type="text/javascript" src="js/script.js"></script> --><!-- jquery --><script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script type="text/javascript" src="jq/jq_script.js"></script>
</html>

css/style.css

/* All Tag */* {margin: 0;padding: 0;border: none;
}body {background: #ddd;
}img {border: none;
}a {text-decoration: none;color: #444;
}a:hover {color: #999;
}/* Wrap */
#wrap{position: relative;width: auto;height: auto;margin: 0 auto;
}#wrap > div{float: left;box-sizing: border-box;width: 280px;height: auto;margin: 10px;padding: 10px;border-radius: 5px;background: #fff;
}/* 除了第一行的div，其他的hover没有效果 */
/* #wrap > div:hover{opacity: 0.5
} */#wrap > div >img{width: 100%;
}#wrap > div > a{font-size: 18px;display: block;font-weight: bold;line-height: 40px;text-align: center;
}

js实现瀑布流

js/script.js

function waterfall(wrap,boxes){var windowWidth=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;var windowHeight=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;var boxWidth = boxes[0].offsetWidth +20;var colsNumber = Math.floor(windowWidth / boxWidth);// console.log(colsNumber);// 设置容器的宽度wrap.style.width = boxWidth * colsNumber + 'px';// 定义一个数组并存储每一列的高度var everyHeight = new Array();for(var i=0;i<boxes.length;i++){if(i<colsNumber){everyHeight[i] = boxes[i].offsetHeight+20;}else{//找到当前数组最小的值，以及Indexvar minHeight =everyHeight[0];var minIndex = 0;for(var j=0;j<colsNumber;j++){if(everyHeight[j]<minHeight){minIndex = j;minHeight = everyHeight[j];}}//将新的Box添加到最短的那列var leftPosition = boxes[minIndex].offsetLeft-10;boxes[i].style.position = 'absolute';boxes[i].style.top = minHeight + 'px';boxes[i].style.left = leftPosition+'px';everyHeight[minIndex] += boxes[i].offsetHeight+20;}}
}window.onload = function() {var wrap = document.getElementById('wrap');var boxes = wrap.getElementsByTagName('div');waterfall(wrap, boxes);
}window.onresize = function(){var wrap = document.getElementById('wrap');var boxes = wrap.getElementsByTagName('div');waterfall(wrap, boxes);
}

jquery实现瀑布流

jq/jq_script.js

function waterfall(wrap,boxes){var windowWidth=$(window).width();var boxWidth = boxes.eq(0).outerWidth()+20;var colsNumber = Math.floor(windowWidth / boxWidth);console.log(colsNumber);// 设置容器的宽度wrap.width(boxWidth * colsNumber);// 定义一个数组并存储每一列的高度var everyHeight = new Array();for(var i=0;i<boxes.length;i++){if(i<colsNumber){everyHeight[i] = boxes.eq(i).outerHeight()+20;}else{//找到当前数组最小的值，以及Indexvar minHeight =everyHeight[0];var minIndex = 0;for(var j=0;j<colsNumber;j++){if(everyHeight[j]<minHeight){minIndex = j;minHeight = everyHeight[j];}}//将新的Box添加到最短的那列console.log(minIndex);boxes.eq(i).css({'position': 'absolute','top': minHeight,'left': boxes.eq(minIndex).position().left-10,'opacity': '0'}).stop().animate({'opacity': '1'}, 1000);everyHeight[minIndex] += boxes.eq(i).outerHeight()+20;}}
}$(document).ready(function event(){var wrap = $('#wrap');var boxes = wrap.children('div');//加载盒子waterfall(wrap, boxes);});

js和jquery对比代码

注释的是js的实现，注释下面对应的是jquery的实现

function waterfall(wrap,boxes){// var windowWidth=window.innerWidth//       || document.documentElement.clientWidth//       || document.body.clientWidth;var windowWidth=$(window).width();// var boxWidth = boxes[0].offsetWidth +20;var boxWidth = boxes.eq(0).outerWidth()+20;// console.log(boxWidth);var colsNumber = Math.floor(windowWidth / boxWidth);console.log(colsNumber);// 设置容器的宽度// wrap.style.width = boxWidth * colsNumber + 'px';wrap.width(boxWidth * colsNumber);// 定义一个数组并存储每一列的高度var everyHeight = new Array();for(var i=0;i<boxes.length;i++){if(i<colsNumber){// everyHeight[i] = boxes[i].offsetHeight+20;everyHeight[i] = boxes.eq(i).outerHeight()+20;}else{//找到当前数组最小的值，以及Indexvar minHeight =everyHeight[0];var minIndex = 0;for(var j=0;j<colsNumber;j++){if(everyHeight[j]<minHeight){minIndex = j;minHeight = everyHeight[j];}}//将新的Box添加到最短的那列// var leftPosition = boxes[minIndex].offsetLeft-10;// boxes[i].style.position = 'absolute';// boxes[i].style.top = minHeight + 'px';// boxes[i].style.left = leftPosition+'px';console.log(minIndex);boxes.eq(i).css({'position': 'absolute','top': minHeight,'left': boxes.eq(minIndex).position().left-10,'opacity': '0'}).stop().animate({'opacity': '1'}, 1000);// everyHeight[minIndex] += boxes[i].offsetHeight+20;everyHeight[minIndex] += boxes.eq(i).outerHeight()+20;}}
}
/*
window.onload = function() {var wrap = document.getElementById('wrap');var boxes = wrap.getElementsByTagName('div');waterfall(wrap, boxes);
}
*/
$(document).ready(function event(){var wrap = $('#wrap');var boxes = wrap.children('div');//加载盒子waterfall(wrap, boxes);});

jquery实现瀑布追加的效果

//模拟数据
var data = [{"src": "1.png","title": "第一怪 竹筒当烟袋"
}, {"src": "2.png","title": "第二怪 草帽当锅盖"
}, {"src": "3.png","title": "第三怪 这边下雨那边晒"
}, {"src": "4.png","title": "第四怪 四季服装同穿戴"
}, {"src": "5.png","title": "第五怪 火车没有汽车快"
}, {"src": "6.png","title": "第六怪 火车不通国内通国外"
}, {"src": "7.png","title": "第七怪 老奶爬山比猴快"
}, {"src": "8.png","title": "第八怪 鞋子后面多一块"
}, {"src": "9.png","title": "第九怪 脚趾四季露在外"
}, {"src": "10.png","title": "第十怪 鸡蛋拴着卖"
}, {"src": "11.png","title": "第十一怪 粑粑叫饵块"
}, {"src": "12.png","title": "第十二怪 花生蚕豆数着卖"
}, {"src": "13.png","title": "第十三怪 三个蚊子一盘菜"
}, {"src": "14.png","title": "第十四怪 四个老鼠一麻袋"
}, {"src": "15.png","title": "第十五怪 树上松毛扭着卖"
}, {"src": "16.png","title": "第十六怪 姑娘叫老太"
}, {"src": "17.png","title": "第十七怪 小和尚可以谈恋爱"
}, {"src": "18.png","title": "第十八怪 背着娃娃谈恋爱"
}];function waterfall(wrap,boxes){var windowWidth=$(window).width();var boxWidth = boxes.eq(0).outerWidth()+20;var colsNumber = Math.floor(windowWidth / boxWidth);// console.log(colsNumber);// 设置容器的宽度wrap.width(boxWidth * colsNumber);// 定义一个数组并存储每一列的高度var everyHeight = new Array();for(var i=0;i<boxes.length;i++){if(i<colsNumber){everyHeight[i] = boxes.eq(i).outerHeight()+20;}else{//找到当前数组最小的值，以及Indexvar minHeight =everyHeight[0];var minIndex = 0;for(var j=0;j<colsNumber;j++){if(everyHeight[j]<minHeight){minIndex = j;minHeight = everyHeight[j];}}//将新的Box添加到最短的那列// console.log(minIndex);//设置盒子样式setStyle(boxes.eq(i), minHeight, boxes.eq(minIndex).position().left, i);everyHeight[minIndex] += boxes.eq(i).outerHeight()+20;}//鼠标经过呈现半透明的交互效果boxes.eq(i).hover(function(event) {$(this).stop().animate({'opacity': '0.5'}, 500);}, function(event) {$(this).stop().animate({'opacity': '1'}, 500);})}
}//设置追加盒子样式
var getStartNumber = 0;
function setStyle(box, top, left, index){if (getStartNumber >= index) {return false;};box.css({'position': 'absolute','top': top,'left': left,'opacity': '0'}).stop().animate({'opacity': '1'}, 1000);getStartNumber = index;
}//判断是否scroll到底部
function scrollBottom(wrap){// 最后一个盒子的高度+其所在列的高度 <= 文档的高度+scrollTop 就判断到底部var documentHeight = $(window).height();var scrollHeight = $(window).scrollTop();var boxes = wrap.children('div');var lastBoxTop = boxes.eq(boxes.length-1).offset().top;var lastHeight = boxes.eq(boxes.length - 1).outerHeight();var lastColHeight = lastBoxTop + lastHeight;console.log(lastColHeight);console.log(documentHeight + scrollHeight);return documentHeight + scrollHeight >= lastColHeight ? true : false;
}//追加盒子函数
function appendBox(wrap){if(scrollBottom(wrap)){for(var i in data){var innerString = '<div><img src="images/' + data[i].src + '"><a href="#">' + data[i].title + '</a></div>';wrap.append(innerString);}}else{return false;}// 实现瀑布流效果waterfall(wrap, wrap.children('div'));
}$(document).ready(function event(){var wrap = $('#wrap');var boxes = wrap.children('div');//加载盒子waterfall(wrap, boxes);$(this).scroll(function(event){appendBox(wrap);})
});

这篇关于分别使用JS和JQuery实现瀑布流以及追加效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/922741。

相关文章

SpringBoot集成redisson实现延时队列教程

SpringBoot集成redisson实现延时队列教程

《SpringBoot集成redisson实现延时队列教程》文章介绍了使用Redisson实现延迟队列的完整步骤,包括依赖导入、Redis配置、工具类封装、业务枚举定义、执行器实现、Bean创建、消费... 目录1、先给项目导入Redisson依赖2、配置redis3、创建 RedissonConfig 配
阅读更多...
Python的Darts库实现时间序列预测

Python的Darts库实现时间序列预测

《Python的Darts库实现时间序列预测》Darts一个集统计、机器学习与深度学习模型于一体的Python时间序列预测库,本文主要介绍了Python的Darts库实现时间序列预测,感兴趣的可以了解... 目录目录一、什么是 Darts？二、安装与基本配置安装 Darts导入基础模块三、时间序列数据结构与
阅读更多...
Python使用FastAPI实现大文件分片上传与断点续传功能

Python使用FastAPI实现大文件分片上传与断点续传功能

《Python使用FastAPI实现大文件分片上传与断点续传功能》大文件直传常遇到超时、网络抖动失败、失败后只能重传的问题,分片上传+断点续传可以把大文件拆成若干小块逐个上传,并在中断后从已完成分片继... 目录一、接口设计二、服务端实现（FastAPI）2.1 运行环境2.2 目录结构建议2.3 serv
阅读更多...
C#实现千万数据秒级导入的代码

C#实现千万数据秒级导入的代码

《C#实现千万数据秒级导入的代码》在实际开发中excel导入很常见,现代社会中很容易遇到大数据处理业务,所以本文我就给大家分享一下千万数据秒级导入怎么实现,文中有详细的代码示例供大家参考,需要的朋友可... 目录前言一、数据存储二、处理逻辑优化前代码处理逻辑优化后的代码总结前言在实际开发中excel导入很
阅读更多...
Spring Security简介、使用与最佳实践

Spring Security简介、使用与最佳实践

《SpringSecurity简介、使用与最佳实践》SpringSecurity是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架,本文给大家介绍SpringSec... 目录一、如何理解 Spring Security？—— 核心思想二、如何在 Java 项目中使用？——
阅读更多...
SpringBoot+RustFS 实现文件切片极速上传的实例代码

SpringBoot+RustFS 实现文件切片极速上传的实例代码

《SpringBoot+RustFS实现文件切片极速上传的实例代码》本文介绍利用SpringBoot和RustFS构建高性能文件切片上传系统,实现大文件秒传、断点续传和分片上传等功能,具有一定的参考... 目录一、为什么选择 RustFS + SpringBoot？二、环境准备与部署2.1 安装 RustF
阅读更多...
Nginx部署HTTP/3的实现步骤

Nginx部署HTTP/3的实现步骤

《Nginx部署HTTP/3的实现步骤》本文介绍了在Nginx中部署HTTP/3的详细步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录前提条件第一步：安装必要的依赖库第二步：获取并构建 BoringSSL第三步：获取 Nginx
阅读更多...
springboot中使用okhttp3的小结

springboot中使用okhttp3的小结

《springboot中使用okhttp3的小结》OkHttp3是一个JavaHTTP客户端,可以处理各种请求类型,比如GET、POST、PUT等,并且支持高效的HTTP连接池、请求和响应缓存、以及异... 在 Spring Boot 项目中使用 OkHttp3 进行 HTTP 请求是一个高效且流行的方式。
阅读更多...
MyBatis Plus实现时间字段自动填充的完整方案

MyBatis Plus实现时间字段自动填充的完整方案

《MyBatisPlus实现时间字段自动填充的完整方案》在日常开发中,我们经常需要记录数据的创建时间和更新时间,传统的做法是在每次插入或更新操作时手动设置这些时间字段,这种方式不仅繁琐,还容易遗漏,... 目录前言解决目标技术栈实现步骤1. 实体类注解配置2. 创建元数据处理器3. 服务层代码优化填充机制详
阅读更多...
Python实现Excel批量样式修改器(附完整代码)

Python实现Excel批量样式修改器(附完整代码)

《Python实现Excel批量样式修改器(附完整代码)》这篇文章主要为大家详细介绍了如何使用Python实现一个Excel批量样式修改器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一... 目录前言功能特性核心功能界面特性系统要求安装说明使用指南基本操作流程高级功能技术实现核心技术栈关键函
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2