HTML+CSS+JS实现图片的瀑布流布局

最新推荐文章于 2024-05-27 15:48:57 发布
最新推荐文章于 2024-05-27 15:48:57 发布
阅读量4.2k 收藏 74
点赞数 39
分类专栏： 图片布局 html+css+js 文章标签： js html css javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Transprant/article/details/115744517
版权
本文介绍如何实现瀑布流布局，通过HTML和CSS建立基础布局，然后使用JavaScript进行后续布局调整，确保图片按照瀑布样式排列。示例包括百度和淘宝的图片搜索布局，通过设置固定宽度和动态高度实现图片的自适应展示。
摘要由CSDN通过智能技术生成

HTML+CSS+JS实现瀑布流布局

前言

瀑布流布局简而言之就是类似瀑布流的布局嘛，这么一讲大家可能还是不是了解的很明白，来来来，那现在我给大家上一个常见的实例:


在这里插入图相信大家在百度上搜索图片时的时候，网页图片的布局就是这样子的吧，什么？你还是不清楚瀑布流，那咱就再我看一个那没关系，淘宝大家应该再熟悉不过了吧片描述

相信大家在百度上搜索图片时的时候，网页图片的布局就是这样子的吧，什么？你还是不清楚瀑布流，那咱就再我看一个那没关系，淘宝大家应该再熟悉不过了吧!



在这里插入图片描述
我们可以发现图中每个商品框的高度不同的，因此导致我们的商品图片的高度布局都不在一个高度上。在百度搜索图片的时候我们发现每张图片的宽度都是不一样的那为什么所用图片的宽度它能刚刚好的占满一行呢?

这就是我今天今天教大家的布局方式——waterfall 布局，那该怎么实现呢？那我们就不多说啦，直接上干货!

一、总体效果

  • 瀑布流的搭建完的效果如下：在这里插入图片描述

二、HTML+CSS简单布局

  • 首先大家在网上搜索一些图片或者用一下自己喜欢的图片均可，用html搭建好框架网页的框架将图片存放好，我们这里使用的了20张图为例。
  • 其次使用html+css实现一个简单的布局，这有个关键的步骤：我们对比上面百度和淘宝页面的瀑布流布局就不难发现，要实现瀑布流所有图片都得有个相同的高度或者高度。因此我们这就给所用照片设置一个固定的宽度，但不限定的图片的高度保证每图片都按其原始比例完整展示出来。

HTML，CSS代码如下：

  • css代码
*{
   
          margin: 0;
          padding: 0;
      }
      #container{
   
          position: relative;
      }
      .box{
   
          float: left;/* 给每个存放照片box设置为浮动元素，让所有的图片浮动到网页的第一行*/
          padding: 5px;
      }
      .box-img{
   
          width: 150px;
          padding: 5px;
          border: 1px solid #ccc;
          box-shadow: 0 0 5px #ccc;
          border-radius: 5px;
      }
      .box-img img {
   
          width: 100%;
          height: auto;
      }
  • html代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>js 瀑布流</title>
 <link rel="stylesheet" href="./index.css">
</head>
<body>
  <div id="container">
    <div class="box">
      <div class="box-img">
        <img src="./img/1.jpg" alt="">
      </div>
    </div>
    <div class="box">
      <div class="box-img">
        <img src="./img/2.jpg" alt="">
      </div<
最低0.47元/天 解锁文章
Transprant
关注
  • 39
    点赞
  • 踩
  • 74
    收藏
    觉得还不错? 一键收藏
  • 22
    评论
专栏目录
HTML之瀑布流布局
weixin_45846139的博客
06-14 1338
什么是瀑布流布局 瀑布流，又称瀑布流式布局。 是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。 瀑布流布局的特点 琳琅满目：整版以图片为主，大小不一的图片按照一定的规律排列。 唯美：图片的风格以唯美的图片为主。 操作简单：在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前。 瀑布流对于图片的展现，是高效而具有吸引力的，用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式
html5响应式动态网格图片瀑布流布局
09-01
html5响应式动态网格图片瀑布流布局
jquery+css3实现瀑布流照片墙特效特效代码
03-20
jquery+css3实现瀑布流照片墙特效是一款效果非常酷的照片墙作品，展示相片的效果非常大气。
原生html和js实现瀑布流布局（macyjs插件，不依赖于jquery，纯原生）
最新发布
weixin_68658847的博客
05-27 293
原生html和js实现瀑布流布局（macyjs插件，不依赖于jquery，纯原生）原生html和js实现瀑布流布局（macyjs插件，不依赖于jquery，纯原生）
页面图片实现瀑布流布局
03-11
利用插件把多张图片按照瀑布流的方式排列。大家可以把页面的图片从后台穿过来，迭代循环生成后按照瀑布流的方式排版显示。
图片瀑布流Html,真的！！！两行css代码实现瀑布流，html,css最简单的瀑布流实现方式且没有缺点...
weixin_30366015的博客
06-04 415
两行css如下:.waterfall-container {/*分几列*/column-count: 2;}.waterfall-item {/*不留白，不知道什么意思可以取消这个样式试试*/break-inside: avoid;}/*列间距，可有可无，默认30px*/微信图片_20200701085236.jpg#######说明：不存在一边列表过长问题，很均匀，没有缺点const oldLi...
HTML＋CSS＋JS 瀑布流式布局（实现懒加载）
qq_44386537的博客
12-27 8862
HTML + JS＋CSS实现瀑布流式布局（包含懒加载） 前几天兴致来了想做一个瀑布流布局的网页，然后就有了各种“神操作”，也在网上看了一些相关的知识点；所以这里对自己这几个小时来一个总结 先上效果图 首先来说一下瀑布流的原理吧：瀑布流是许多数据块组成的，可以是图片，可以是div，但是它们都有一个特点，就是等宽不等高，正是因为它等宽不等高，所以如果按部就班的排布的话，才会出现很大的缝隙，特别不好看，说白了瀑布流布局就是充分利用图片之间的空隙来合理的布局，使布局看起来好看，符合人眼的审美。 首先上CSS布局
HTML5+CSS3+JS小实例：自适应瀑布流布局
01-24
在这个"HTML5+CSS3+JS小实例：自适应瀑布流布局"中，我们将探讨如何使用这些技术实现一个灵活且适应不同屏幕尺寸的瀑布流布局。 首先，HTML5作为网页的结构语言，它引入了许多新元素来更好地表达网页内容，如`...
html+css+js实现的8款图片展示设计，可用于制作网页版相册
07-04
4. **瀑布流布局**：这种布局方式借鉴了Pinterest，图片会根据浏览器窗口大小动态调整排列。CSS Flexbox或Grid布局可以轻松实现这一效果，同时JavaScript可以用来动态加载新图片并调整布局。 5. **平移滑动**：通过...
html+css+js瀑布流效果
06-06
然而，由于浏览器兼容性问题，我们通常会结合JavaScript来实现更兼容的瀑布流布局。 JavaScript是前端开发中的动态脚本语言，用于实现网页的交互性和动态功能。在瀑布流布局中，JavaScript通常用于计算元素的位置和...
HTML5 CSS3 照片墙瀑布流布局特效.rar
07-10
一款基于HTML5 CSS3的瀑布流布局特效，相信瀑布流您已经很熟悉了，这两年流行的一种网页布局效果，它可以横向和垂直布局，本款代码貌似兼顾了两者，看上去更像是一个照片墙特效，点击任意一张小图片，会显示该图片的描述文字，在火狐下效果更好。
jQuery+HTML5响应式手机端瀑布流布局特效
06-10
最后，"js"目录下的脚本文件可能是实现了瀑布流布局逻辑的jQuery插件，它负责计算元素的位置，实现布局的更新。 总的来说，这个"jQuery+HTML5响应式手机端瀑布流布局特效"是一个综合性的示例，展示了如何结合HTML5...
简单html、css实现瀑布流
千里之行，始于足下！
07-01 738
一、具体实现 1、html <template> <div class="container"> <div class="item-box" v-for="(item,index) in list" :key="index">{{index+1}}</div> </div> </template> 2、js <script> export default{ data(){
html照片瀑布轮播,瀑布流图片布局以及打开点击图片动画特效
weixin_42484477的博客
06-22 431
插件描述：一款基于Masonry瀑布流图片布局以及打开点击图片动画特效。这个瀑布流特效包括打开网格图片时的动画效果，网格的消失动画效果和返回的图片预览效果。简要教程这是一款基于Masonry瀑布流插件的图片网格瀑布流布局和打开图片动画特效。这个瀑布流特效包括打开网格图片时的动画效果，网格的消失动画效果和返回的图片预览效果。该图片网格瀑布流特效在打开网格图片时，该网格项会发生动画效果。其他的网格会平...
HTML+css+js实现瀑布流效果
qq_46038677的博客
07-22 144
结果预览,实现了图片瀑布流效果，和可以无限下滑效果 一.HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js实现瀑布流</title> <link type="text/css" rel="stylesheet" href="js实现瀑布流.css"> <script sr
html 手机端瀑布流,移动端 瀑布流布局
weixin_34954308的博客
06-19 733
html {$item['teacher']}{$item['fl']}{$item['city']}js//重新定义瀑布流window.onresize = function() {waterFall();};//clientWidth 处理兼容性function getClient() {return {width: window.innerWidth || docume...
瀑布流
JIN-BOSS的博客
06-18 749
<!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-...
前端必看的8个HTML+CSS技巧 （八）瀑布流布局
web全栈开发的博客
11-18 556
CSSGrid和Flexbox让我们可以更简便，更容易和更快的实现各式各样的响应布局，并且让我们快捷方便的在布局中实现横向剧中和竖向剧中。但是回想一下以前是颇为困难的。虽然这些新出的布局...
简单实现瀑布流布局 html+css
你好呀，很高兴你在看这里~
02-25 2232
效果： 前言： 这个效果几行 css 代码就能搞定，但是其有个缺点是图顺序是从上到下排列再从左到右。没能实现从左到右再从上到下顺序排列。这样不利于最新图片优先显示的原则。所以其只适用在一些简单场景，复杂的瀑布流布局还是得用 js 实现。 实现： 1. 定义标签，main是底层盒子，.item里放图片，这里用了12张图： <main> <div class="item"> <img src="https://picsum.photos/3
css grid+vue实现瀑布流
05-12
要使用CSS grid和Vue.js来实现瀑布流，可以按照以下步骤进行： 1. 在Vue组件中，使用v-for指令遍历数据，并将每个数据项渲染为一个包含图片的div。 2. 在CSS中，使用grid布局来创建网格布局。可以使用grid-template-columns属性来定义列的宽度，并使用grid-auto-rows属性来定义每个网格的高度。 3. 为了实现瀑布流布局，可以使用grid-auto-flow属性，并将其设置为dense。这将允许网格填充空白位置，从而创建更紧凑的布局。 4. 在Vue组件中，可以使用计算属性来计算每个图片div的高度。这可以通过使用一个方法来获取每个图片的实际高度，并返回一个包含所有高度的数组。 5. 最后，在CSS中，使用grid-row-end属性来设置每个图片div的结束行。可以使用一个循环来为每个图片div设置正确的结束行。 以下是一个简单的示例代码： ```html <template> <div class="grid-container"> <div v-for="(item, index) in itemList" :key="index" class="grid-item" :style="{ 'grid-row-end': gridRowEnds[index] }"> <img :src="item.src" @load="setImageHeight(index)" /> </div> </div> </template> <script> export default { data() { return { itemList: [ { src: 'image1.jpg' }, { src: 'image2.jpg' }, { src: 'image3.jpg' }, { src: 'image4.jpg' }, { src: 'image5.jpg' }, ], imageHeights: [], }; }, computed: { gridRowEnds() { const gridRowEnds = []; let currentRow = 1; let rowHeights = [0, 0]; for (let i = 0; i < this.itemList.length; i++) { const imageHeight = this.imageHeights[i]; const shortestIndex = rowHeights[0] < rowHeights[1] ? 0 : 1; gridRowEnds[i] = `row-end ${currentRow + imageHeight}px`; rowHeights[shortestIndex] += imageHeight; if (rowHeights[0] === rowHeights[1]) { currentRow += imageHeight; rowHeights = [0, 0]; } } return gridRowEnds; }, }, methods: { setImageHeight(index) { const image = this.$el.querySelectorAll('.grid-item img')[index]; if (image) { this.imageHeights[index] = image.offsetHeight; } }, }, }; </script> <style> .grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-auto-rows: 10px; grid-auto-flow: dense; } .grid-item { margin: 10px; overflow: hidden; } </style> ``` 这个示例代码假设所有图片都有相同的宽度，但高度可能不同。在计算属性中，我们使用一个循环来为每个图片div设置正确的结束行。我们还使用一个方法来获取每个图片的实际高度，并将其存储在一个数组中。最后，在CSS中，我们使用了grid布局来创建网格布局，并使用grid-row-end属性来设置每个图片div的结束行。
评论 22
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值