原生js实现瀑布流效果
作者:Tangerine. 发布时间:2023-09-04 07:11:02
标签:js,瀑布流
本文实例为大家分享了js实现瀑布流效果的具体代码,供大家参考,具体内容如下
CSS样式:
<style>
.cont{margin: 0 auto;position: relative;}
.box{float: left;padding: 5px;}
.imgbox{border: black solid 1px;padding: 5px;border-radius: 5px;}
.imgbox img{width: 200px;display: block;}
</style>
HTML结构:
<div class="cont">
<div class="box">
<div class="imgbox">
<img src="img/1.jpg" >
</div>
</div>
//......此处省略雷同代码
<div class="box">
<div class="imgbox">
<img src="img/2.jpg" >
</div>
</div>
</div>
JavaScript代码:
<script>
onload = function(){
var wf = new WaterF();
wf.init();
}
class WaterF{
constructor(){
this.clientW = document.documentElement.clientWidth;
this.abox = document.querySelectorAll(".box");
this.cont = document.querySelector(".cont");
}
init(){
this.maxNum = parseInt(this.clientW / this.abox[0].offsetWidth);
this.cont.style.width = this.maxNum * this.abox[0].offsetWidth + "px";
this.firstLine();
this.otherLine();
}
firstLine(){
this.heightArr = [];
for(var i=0;i<this.maxNum;i++){
this.heightArr.push(this.abox[i].offsetHeight);
}
}
otherLine(){
for(var i=this.maxNum;i<this.abox.length;i++){
var min = Math.min(...this.heightArr);
var minIndex = this.heightArr.indexOf(min);
this.abox[i].style.position = "absolute";
this.abox[i].style.top = min + "px";
this.abox[i].style.left = minIndex * this.abox[0].offsetWidth + "px";
this.heightArr[minIndex] = this.heightArr[minIndex] + this.abox[i].offsetHeight;
}
}
}
</script>
来源:https://blog.csdn.net/m0_46370469/article/details/104707999
0
投稿
猜你喜欢
- 第一步:安装SQL200,并启动SQL2000。到网上下载SQL2000,并安装完毕。( * 作系统是XP,装的是SQL个人版),按照下面所示
- 或许你也经历过,很多人都说一个女人很漂亮,而你觉得很一般。有时候,我也尝试理解为什么会对某个女人情有独钟。通常,我用迷人来描述,但这个&qu
- CREATE TABLE table1( [ID] [bigint] IDENTITY(1,1) NOT NULL, [Name] [nva
- 阅读上一篇:W3C优质网页小贴士(三)明智地选择 URI没有什么比走到你最喜欢的商店门口,却发现店门紧闭,而且没有看见店面搬迁告示这种事情还
- 我想做一个页面,10秒后转向其它页。想在网页中显示10秒的倒计时。谢谢了。对JS不懂 方法一:<html><h
- 1.通过pip安装python第三方模块paramikopip install paramiko2.创建脚本##导入paramiko、tim
- 阅读上一篇:W3C优质网页小贴士(二) 注意字体大小网页设计者中有这么一种倾向:他们认为小字体能让网页看起来更漂亮,并能提供更多空间给每个网
- 作用域链(Scope Chain)JavaScript中的一种重要机制,JS中所有的标识符(Identifier)都是通过Scope Cha
- ASP实例代码,利用SQL语句动态创建Access表。留作参考,对在线升级数据库有用处.<% nowtime = now()
- 如何用数据库制作一个多用户版的计数器?代码和说明如下:count.asp' 计数器的核心程序<%Set c
- 外面很多所谓sitemap生成代码都只生成目录文件地址,没生成动态的,我后来自己写了这个,是支持动态的,例子: 如你是文章网站,文章有200
- 严格来说,Having并不需要一个子表,但没有子表的Having并没有实际意义。如果你只需要一个表,那么你可以用Where子句达到一切目的。
- 平行坐标图,一种数据可视化的方式。以多个垂直平行的坐标轴表示多个维度,以维度上的刻度表示在该属性上对应值,相连而得的一个折线表示一个样本,以
- 1. 停应用层的各种程序。 2. 停oralce的监听进程: $lsnrctl stop 3. 在独占的系统用户下,备份控制文件: SQL&
- 本文实例讲述了Go语言使用sort包对任意类型元素的集合进行排序的方法。分享给大家供大家参考。具体如下:使用sort包的函数进行排序时,集合
- 每个进行过较大型的ASP-Web应用程序设计的开发人员大概都有如下的经历:ASP代码与页面HTML混淆难分,业务逻辑与显示方式绞合,使得代码
- PDO::preparePDO::prepare — 准备要执行的SQL语句并返回一个 PDOStatement 对象(PHP 5 >
- asp中fso怎样判断一个盘上是否有文件,实例代码,需要的朋友可以试试:<% dim objfolder dim
- 对设计“以人为本”和“绿色设计”两个观点的反思——兼与设计界同仁商榷Reflection of Two Views: “People-ori
- SqlBulkCopy 来自数据源的 String 类型的给定值不能转换为指定目标列的类型 nvarchar。 在网上找了下,大都说是因为数