(精品)用原生JS写一个好看的瀑布流

我不是女神ヾ 2023-03-03 11:11 194阅读 0赞

css部分

```javascript
    *{ 
    				margin: 0;
    				padding: 0;
    			}
    			#content{ 
    				width: 1000px;
    				border: 4px solid black;
    				margin: 5px auto;
    				overflow: hidden;
    			}
    			#content ul{ 
    				width: 240px;
    				padding: 4px;
    				float: left;
    				list-style-type: none;
    				border: 1px solid red;
    			}
    			#content ul li{ 
    				background-color: yellow;
    				font-size: 100px;
    				color: white;
    				text-align: center;
    				margin-bottom: 5px;
    			}

html页面部分

<div id="content">
    			<ul></ul>
    			<ul></ul>
    			<ul></ul>
    			<ul></ul>
    		</div>

js代码部分

function ranNum(m,n){ 
    			return Math.floor(Math.random() * (n - m + 1) + m);
    		}
    		// 获取所有的ul 
    		var  content = document.getElementById("content");
    		var uls = content.getElementsByTagName("ul");
    		//创建li节点
    		var li;
    		var index;
    		var arrH;
    		var lis = content.getElementsByTagName("li");
    	    //创建li的函数
    		function createLi(num){ 
    				for (var i = 0;i < num;i++) { 
    				li = document.createElement("li");
    				//随机颜色
    				li.style.backgroundColor = "rgb(" + ranNum(0,255) + "," + ranNum(0,255) + "," + ranNum(0,255) + ")";
    				//随机高度
    				li.style.height = ranNum(120,130) + "px";
    				// li.style.lineHeight = li.offsetHeight + "px";
    				li.style.lineHeight = li.style.height;
    				li.innerHTML = lis.length + 1;
    				arrH = [];//存储对应的四个ul的高度
    				for (var j = 0;j < uls.length;j++) { 
    					arrH.push(uls[j].offsetHeight);
    				}
    				//求四个ul中的最小高度
    				var minHeight = Math.min.apply(null,arrH);
    				//最小高度所在的下标
    				var minIndex = arrH.indexOf(minHeight);
    				//插入到最低的ul中
    				uls[minIndex].appendChild(li);
    				}
    		}
    		createLi(50);
    		
    		//添加滚动事件
            var arrA;		
    		window.onscroll = function (){ 
    			arrA = [];//存储四个ul的高度
    			for (var j = 0;j < uls.length;j++) { 
    				arrA.push(uls[j].offsetHeight);
    			}
    			//求四个ul中的最小高度
    			var minHeight = Math.min.apply(null,arrA);
    			if (getWindowHeight() + getWindowScrollTop() > minHeight) { 
    				//加载更多
    				console.log("到底部了");
    				createLi(50);
    			}
    			
    		}
    		
    		
    		//获取窗口window也就是body的可视高度
    		function getWindowHeight(){ 
    			var h = window.innerHeight || document.documentElement.clientHeight;
    			return h;
    		}
    		//获取窗口的滚动距离
    		function getWindowScrollTop(){ 
    			var s = document.body.scrollTop || document.documentElement.scrollTop;
    			return s;
    		}

实现效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjI0MTA1_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MjI0MTA1_size_16_color_FFFFFF_t_70]: /images/20230208/b57e7ca8208346249f154110eab8e8eb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，194人围观）

还没有评论，来说两句吧...

相关阅读

相关原生瀑布流布局

下载插件 [http://tk.shangpreechina.com/themes/Ewdade/default/js/modernizr.js][http_tk.shangp

梦里梦外;/ 2023年09月29日 11:06/ 0 赞/ 18 阅读

相关原生js实现最简单的瀑布流布局

瀑布流：瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部（百度百科）

痛定思痛。/ 2023年06月05日 08:10/ 0 赞/ 5 阅读

相关 (精品)用原生JS写一个好看的瀑布流

css部分 ```javascript { margin: 0; padding: 0; } c

我不是女神ヾ/ 2023年03月03日 11:11/ 0 赞/ 195 阅读

相关【原生js】好玩的瀑布流

内容 > 原生的瀑布流思路分析以及具体实现屡屡思路 ①：何为瀑布流： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGV

- 日理万妓/ 2022年12月08日 15:32/ 0 赞/ 172 阅读

相关原生js实现瀑布流

[https://segmentfault.com/a/1190000012621936][https_segmentfault.com_a_1190000012621936]

ゝ一世哀愁。/ 2022年10月02日 12:47/ 0 赞/ 226 阅读

相关 JS原生瀑布流

今天早起看了慕课的瀑布流，的确讲的十分详细，也十分的好，我在博客里也就只能给代码加些注释，和说一下思路。建议大家去看一下慕课的瀑布流教程，非常详细，每一个细节都讲的非常好，只要

Dear 丶/ 2022年08月03日 04:27/ 0 赞/ 211 阅读

相关原生JS实现的简单“瀑布流”布局

自pinterest网站爆红以来，国内一度掀起“仿PIN”狂潮，诸如花瓣、蘑菇街等等。正是如此，“瀑布流”式布局受到广大网民的青睐。众多知名JS库，也相继出现“瀑布流”布局插件

太过爱你忘了你带给我的痛/ 2022年07月30日 14:55/ 0 赞/ 281 阅读

相关 js 原生瀑布流布局，瀑布流布局

HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="

左手的ㄟ右手/ 2022年05月16日 08:41/ 0 赞/ 312 阅读

相关原生js实现瀑布流！

一、分析： 1、瀑布流布局被广泛运用于图片展示，但是展示的图片需要宽度相等，而高度可以自适应； 2、使用js获取图片宽度、获取窗帘宽度，计算一行能容纳的图片个数，然后获

矫情吗；*/ 2022年04月24日 15:40/ 0 赞/ 286 阅读

相关原生 JS 实现一个瀑布流插件

> 更好的阅读体验，点击 [原文地址][Link 1] ![16147e9813dbd7a9?w=640&h=280&f=jpeg&s=49458][16147e9813db

谁借莪１个温暖的怀抱￠/ 2021年10月01日 00:42/ 0 赞/ 352 阅读