分别使用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。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2