前端瀑布流使用原生JS实现（超详细！）

最新推荐文章于 2023-10-16 17:14:25 发布

努力中的小mi

最新推荐文章于 2023-10-16 17:14:25 发布

阅读量225

点赞数

文章标签： javascript css css3 html html5

本文链接：https://blog.csdn.net/weixin_54345600/article/details/118524143

版权

本文详细介绍了如何使用原生JavaScript实现前端瀑布流布局。虽然CSS3的columns和column-gap属性也能实现，但因兼容性问题，作者选择自主实现。文章分为四个部分：效果展示、HTML结构、CSS样式和JS实现。通过封装构造函数，实现了一个可复用的瀑布流布局组件。

摘要由CSDN通过智能技术生成

文章目录

前言

前言

今天记录一下，前端使用原生JS来实现瀑布流布局，其实在CSS3中新出了两个属性分别是：columns 和 column-gap 这两个值可以实现瀑布流布局，但是兼容性不强，而且也是别人已经写好的，感觉使用意义不大，接下来我们自己来实现一个瀑布流布局。

一：效果展示

在这里插入图片描述

二：HTML 部分

搭建基本结构，里面每一个div对应着一个图片。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <!-- 引入CSS文件 -->
  <link rel="stylesheet" href="css/index.css" />
</head>

<body>
	<div class="wrapper J_waterfall">
	  <div class="wf-Item"><img src="./img/1.jpg" alt="" class="wf-img"></div>
	  <div class="wf-Item"><img src="./img/2.jpg" alt="" class="wf-img"></div>
	  <div class="wf-Item"><img src="./img/3.jpg" alt="" class="wf-img"></div>
	  <div class="wf-Item"><img src="./img/4.jpg" alt="" class="wf-img"></div>
	  <div class="wf-Item"><img src="./img/5.jpg" alt="" class="wf-img"></div>
	  <div class="wf-Item"><img src="./img/6.jpg" alt="" class="wf-img"></div>
	  <div class="wf-Item"><img src="./img/7.jpg" alt="" class="wf-img"></div>
	  <div class="wf-Item"><img src="./img/8.jpg" alt="" class="wf-img"></div>
	  <div class="wf-Item"><img src="./img/9.jpg" alt="" class="wf-img"></div>
	  <div class="wf-Item"><img src="./img/10.jpg" alt="" class="wf-img"></div>
	  <div class="wf-Item"><img src="./img/11.jpg" alt="" class="wf-img">

最低0.47元/天解锁文章

努力中的小mi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端瀑布流使用原生JS实现（超详细！）

文章目录前言一：效果展示二：HTML 部分三：CSS 部分四：JS 部分完整代码前言今天记录一下，前端使用原生JS来实现瀑布流布局，其实在CSS3中新出了两个属性分别是：columns 和 column-gap 这两个值可以实现瀑布流布局，但是兼容性不强，而且也是别人已经写好的，感觉使用意义不大，接下来我们自己来实现一个瀑布流布局。一：效果展示二：HTML 部分搭建基本结构，里面每一个div对应着一个图片。<!DOCTYPE html><html lang="en"
复制链接

扫一扫