一款超级简单的瀑布流的制作

2019独角兽企业重金招聘Python工程师标准>>>

这款是在网上学习制作的，原理那啥的超级简单。。。话不多说，直接上代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>瀑布流</title><style>*{margin: 0;padding: 0;}#content{width: 1000px;border: 1px solid black;margin: 0 auto;overflow: hidden;}ul{padding: 4px;float: left;list-style-type: none;display: block;width: 191px;}ul li{background: yellow;font-size: 100px;color: #ffffff;text-align: center;margin-bottom: 5px;}</style>
</head>
<body>
<div id="content"><ul></ul><ul></ul><ul></ul><ul></ul><ul></ul>
</div></body>
<script>function randomNum(x,y){return Math.floor(Math.random()*(y-x+1)+x);}function randomColor(){var red = randomNum(0,255);var green = randomNum(0,255);var blue = randomNum(0,255);return 'rgb(' + red + ',' + green + ',' + blue +')';}var content = document.getElementById('content');var uls = document.querySelectorAll('ul');content.style.flex = uls.length;for(var i=0;i<100;i++){var li = document.createElement('li');li.style.backgroundColor = randomColor();li.style.height = randomNum(150,500) + 'px';li.innerHTML = i+1 + ' ';var index = 0;for(var j=0;j<uls.length;j++){if(uls[j].offsetHeight < uls[index].offsetHeight){index = j;}}uls[index].appendChild(li);}
</script>
</html>

转载于:https://my.oschina.net/tianyuqin/blog/804334

一款超级简单的瀑布流的制作相关推荐

利用JS实现简单的瀑布流效果
转载:https://www.cnblogs.com/dyx-wx/p/4642637.html 一.瀑布流之准备工作首先声明下, 为了方便演示和联系, 我使用的是本地图片, 如果大家有需要的话 ...
瀑布流式页面布局_微信小程序——实现简单的瀑布流式布局
写页面时,考虑到美观,良好的用户体验,对于内容的展示我们经常会用到瀑布流式布局,那么如何实现一个简单的瀑布流呢? 瀑布流式布局原理:遍历数组判断奇偶性,然后分左右排布,左右两边代码基本一致直接上代 ...
关于微信小程序简单瀑布流的制作
应业务需要,制作了简单的瀑布流,应用于购物平台. 首先是单个内容组件.考虑到后台计算的消耗,因而将内容里的图片高度采用直接输入.到时传入数据时需注意. <!--components/showit ...
深入分析PTTools这款PT助手的瀑布流功能
PTTools这款PT助手最近上线了一个新的功能"影视瀑布",相信很多热爱PT的小伙伴,一定很好奇这个功能是怎么实现的.为此小编特意去请教了一下PTTools的作者.了解了不少实现 ...
uniapp实现简单图片瀑布流
前言: 由于使用uniapp开发的微信小程序不需要考虑响应式,因此瀑布流的实现相对于pc端更为简单. 思路: 创建宽度一致左右两个盒子用于展示图片流,用过判断两个盒子的高度大小来决定下一张图片插入到哪 ...
哈，又一款超级简单的队列（MQ）实现方案来了~
开源的消息队列已经很多了,但大部分很重,实际环境下,很多可能只是使用到了一点功能而已,杀鸡使用牛刀,着实有些浪费了.很多时候,我们只想要一片绿叶,但它们给了我们整个的春天,很难消化.本着DIR精神, ...
AJAX异步实现简单的瀑布流
传统瀑布流布局ul-li,需要先设定显示几列,每列是一个li,需要左浮动并指定宽度,li里面的布局也要先布局好,主要是要定宽,高度自动:然后通过ajax异步,从数据库中得到数据,遍历后将数据插入最矮的 ...
ReactHooks——制作一个简单的瀑布流(css)
瀑布流数据 export const TRAVEL_DATA = [{classname:"animate__bounceInLeft",imgsrc: img1,},{clas ...
java瀑布流_一个简单的瀑布流实现。
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博客地址为http://www.cnblogs.com/jasonnode/ . 瀑布流简介主 ...

一款超级简单的瀑布流的制作

一款超级简单的瀑布流的制作相关推荐

最新文章

热门文章