图片瀑布流实现(基于Jquery)

最新推荐文章于 2024-05-23 10:59:14 发布
最新推荐文章于 2024-05-23 10:59:14 发布
阅读量535 收藏 5
点赞数
分类专栏： 典型demo 文章标签： html javascript jquery 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37155582/article/details/112264760
版权

在开发中，会遇到图片瀑布流的布局，下面，使用Jquery实现一个图片的瀑布流效果。

  • 首先，要先明白瀑布流的使用情况。对于瀑布流的图片要求应当是等宽的，其大体布局如图所示：瀑布流

从图中可以看到，瀑布流布局只有规律的 ：

  1. 除第一排图片之后图片的top总是往上次top最低的图片位置上靠；

  2. 除第一排图片之后图片的left总是由其上面那张图片的left决定

 

  • 有了以上 规律，便可进行代码实现，解决思路已经在代码中进行注释：

    <!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>瀑布流</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            position: relative;
            /* justify-content: center; */
            margin: 0 auto;
        }
       .box {
           /* 使图片的高度就是外层div的高度布局 */
           display:table;
       }
       img { 
        width: 300px;
        margin:10px;
       }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1603365312,3218205429&fm=26&gp=0.jpg" alt="" srcset="">
        </div>
        <div class="box">
            <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3791918726,2864900975&fm=26&gp=0.jpg" alt="" srcset="">
        </div>
        <div class="box">
            <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=386260428,3343317581&fm=26&gp=0.jpg" alt="" srcset="">
        </div>
        <div class="box">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1822458797,1995212865&fm=26&gp=0.jpg" alt="" srcset="">
        </div>
        <div class="box">
            <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2726159083,3055171894&fm=26&gp=0.jpg" alt="" srcset="">
        </div>
        <div class="box">
             <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2033921778,648007645&fm=26&gp=0.jpg" alt="" srcset="">
        </div>

        <div class="box">
             <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1428040234,1545850769&fm=26&gp=0.jpg" alt="" srcset="">
        </div>
        <div class="box">
            <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2728981340,289447121&fm=26&gp=0.jpg" alt="" srcset="">
        </div>
        <div class="box">
            <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2578095355,3996748034&fm=26&gp=0.jpg" alt="" srcset="">
        </div>
        <div class="box">
            <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3063337889,910174232&fm=26&gp=0.jpg" alt="" srcset="">
        </div>
        <div class="box">
            <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3828070422,3546329115&fm=26&gp=0.jpg" alt="" srcset="">
        </div>
        <div class="box">
            <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2683323894,4026268117&fm=26&gp=0.jpg" alt="" srcset="">
        </div>
        <div class="box">
            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1885709792,3583412796&fm=26&gp=0.jpg" alt="" srcset="">
        </div>
        <div class="box">
            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=243445625,3448531163&fm=26&gp=0.jpg" alt="" srcset="">
        </div>
        <div class="box">
            <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2905596528,1339692195&fm=26&gp=0.jpg" alt="" srcset="">
        </div>
        <div class="box">
            <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=164386111,1593788862&fm=26&gp=0.jpg" alt="" srcset="">
        </div>
    </div>
    <script>
        // 需要图片完全加载以后，再去执行瀑布流函数【所以要使用window.onload事件】
      $(window).on('load', function(){
          waterFall();
          $(".container").height(Math.max(document.body.scrollHeight,document.documentElement.scrollHeight))

      })
      function waterFall(){
        // 1.获取所有的盒子
        let boxs =$(".box");
        // 2.获取屏幕的宽度
        let winW = $(window).width();
        // 3.获取每一个图片宽度
        let boxW = boxs.width();
        // 4.获取每一行能够摆放的图片数量并
        let cols = Math.floor(winW/boxW);
        // 5.设置外层容器的宽度，使用整体能居中显示
        $(".container").width(boxW * cols);
        // 4.有一个高度数组来存放每一行的高度
        let heightArr = [];
        // 5.找到最小高度值以及对应的索引，再除第一行以外的每一张图片都应该放在对应最小高度索引值图片下方
        boxs.each(function(index,item){
          let boxHeight = $(item).height()
          if(index<cols){
            //   第一排的图片的高度放入数组中
              heightArr.push(boxHeight);
          }else{
              //获取数组中的最小高度值 
              const minHeight = Math.min(...heightArr);
            //   const minHeight = Math.min.apply(null, heightArr);  //ES5的实现
             //最小高度值对应的索引      
              const minIndex = heightArr.indexOf(minHeight);
            // 对除第一排的图片进行绝对定位
              $(item).css(
                  {
                      position: 'absolute',
                      left: minIndex * boxW + 'px', //最小高度值的索引*box宽度
                      top: minHeight + 'px',  // 最小高度值
                  }
              );
              heightArr[minIndex] += boxHeight;
          }
        })
      }
    </script>
</body>
</html>

    重要细节实现在waterFall函数那一部分，单独拆分出来（html中的图片来源于百度）：

       // 需要图片完全加载以后，再去执行瀑布流函数【所以要使用window.onload事件】
      $(window).on('load', function(){
          waterFall();
          $(".container").height(Math.max(document.body.scrollHeight,document.documentElement.scrollHeight))

      })
      function waterFall(){
        // 1.获取所有的盒子
        let boxs =$(".box");
        // 2.获取屏幕的宽度
        let winW = $(window).width();
        // 3.获取每一个图片宽度
        let boxW = boxs.width();
        // 4.获取每一行能够摆放的图片数量并
        let cols = Math.floor(winW/boxW);
        // 5.设置外层容器的宽度，使用整体能居中显示
        $(".container").width(boxW * cols);
        // 4.有一个高度数组来存放每一行的高度
        let heightArr = [];
        // 5.找到最小高度值以及对应的索引，再除第一行以外的每一张图片都应该放在对应最小高度索引值图片下方
        boxs.each(function(index,item){
          let boxHeight = $(item).height()
          if(index<cols){
            //   第一排的图片的高度放入数组中
              heightArr.push(boxHeight);
          }else{
              //获取数组中的最小高度值 
              const minHeight = Math.min(...heightArr);
            //   const minHeight = Math.min.apply(null, heightArr);  //ES5的实现
             //最小高度值对应的索引      
              const minIndex = heightArr.indexOf(minHeight);
            // 对除第一排的图片进行绝对定位
              $(item).css(
                  {
                      position: 'absolute',
                      left: minIndex * boxW + 'px', //最小高度值的索引*box宽度
                      top: minHeight + 'px',  // 最小高度值
                  }
              );
              heightArr[minIndex] += boxHeight;
          }
        })
      }

    最终实现效果：

瀑布流 

 

以上就是基于jquery的瀑布流实现，如有不正确之处，欢迎指出~

vue 封装 瀑布流
lyinshaofeng的博客
10-26 1397
vue 封装 瀑布流
瀑布流实现
11-07
网上找的瀑布流安卓实现源码demo，希望这个可以对你有用
vue 瀑布流 + elementUI
热门推荐
占星安啦的博客
09-06 1万+
1.在线预览 2 文档结构 <el-container id="index"> <!-- 点击图片详情弹窗 --><!-- :open="opmethod" --> <el-dialog :visible.sync="dialogVisible" :fullscreen="true" custom-class="el-dialog-aa" top="0" :show-close="false" @open="opmethod">
原生JS实现瀑布流
weixin_34253126的博客
09-06 219
　　浏览网页的时候经常会遇到瀑布流布局的网站。也许有些读者不了解瀑布流。瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。比如下面图片的效果，就是一个典型的瀑布流。 网上有很多JQ的瀑布流插件，而且都写好了兼容，都可以尝试去使用，这里只是跟大家分享一下原生js实现瀑布流的效果，一起学习。 ...
vue的瀑布流组件、分享插件、cookie插件，ElementUI，嵌套布局
Sakuraaaaaaa的博客
09-15 1682
vue插件： vue的瀑布流组件， vue的分享插件， nuxt工程中使用ElementUI， vue的cookie插件， 嵌套布局
Grid+Element+document实现简单的瀑布流
qq_46114837的博客
09-05 1497
Grid+Element+document实现简单的瀑布流 原理：通过对应的Grid布局可以实现图片的拼接式的布局(列宽固定，行高不固定，自由组合)，Element中el-image的preview-src-list实现了图片预览(preview-src-list接受的为数组)，为了让图片瀑布流可以循环展示或者获取更多的图片，可以通过对页面的滚动条是否到达底部时进行判断，当到达底部时，则触发函数 一、Grid布局+Element大图预览 采用vue3编写 思路：从服务端获取到对应的图片的链接，如果需要使用大
基于jQuery的等高等宽图片瀑布流设计源码
最新发布
10-02
该项目是一个基于jQuery的图片瀑布流设计源码，主要用于创建一个网页设计中的图片展示效果。其核心特点在于实现图片的等高等宽效果，使得用户在浏览网页时能获得更加流畅和一致的视觉体验。瀑布流布局在当前的网页...
基于jQuery实现瀑布流页面
10-20
\n\n值得注意的是，此示例仅展示了基本的瀑布流实现，没有考虑到动态加载和页面滚动加载新内容的情况。在实际应用中，为了提高用户体验，通常会在用户滚动到底部时通过Ajax加载更多内容，这种技术被称为“无限滚动”...
基于jQuery实现瀑布流效果
02-04
基于jQuery实现瀑布流效果，主要涉及以下几个核心知识点： 1. **jQuery库**：jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计以及Ajax交互。在实现瀑布流时，我们利用jQuery提供的API...
jQuery图片瀑布流的简单实现代码
10-20
### jQuery图片瀑布流的简单实现代码知识点解析 #### 1. 图片瀑布流概念 图片瀑布流是一种网页布局方式，它模拟了自然界的瀑布流水效果，使图片能够自适应地按照不同的高度排列，形成错落有致的视觉效果。这种布局...
基于jquery实现瀑布流布局
10-23
在网页设计中，瀑布流布局常常用于展示图片、新闻、评论等，它的实现方式可以多样化，而使用jQuery实现是一种简便快捷的方法。 jQuery是一个快速、小巧、功能丰富的JavaScript库。它使得HTML文档遍历和操作、事件...
vue瀑布流组件vuewaterfallcomponent
08-10
一个vue组件，包含瀑布流布局和无限滚动加载
瀑布流的简单实现
lee_xudong的博客
11-17 487
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{margin:0;padding:0;} div{width:900px;border:1px solid red;margin:0 auto;overflow:hidden;} ul{width:250px;
vue 瀑布流
u013361179的博客
02-22 779
<div class="waterfallContainer"> <div class="waterfallItem" v-for="(item, index) in list" :key="index"> {{item}} </div> </div> .waterfallContainer { column-count: 3; //分几列 } .waterfallItem { break-inside: avoid.
Vue实现简单的瀑布流
wangming0123的博客
04-15 231
<template> <div> <div class="list"> <div :class="[ index == 1 ? 'listItem2' : 'listItem', index % 2 == 1 && index != 1 ? 'listItem3' : 'listItem', index==list.length-1&&
vue实现简单瀑布流布局(vue-waterfall2)
weixin_44590591的博客
09-15 6547
1、安装vue-waterfall2 npm i vue-waterfall2@latest --save 或者 yarn add vue-waterfall2@latest --save 2、main.js中全局使用 注意：如果不在main.js全局引入，而在某个页面import引入的话,会报render渲染错误 import Vue from 'vue' import App from './App.vue' import router from "@/router"; import Elem
瀑布流布局的实现方案
yu240956419的博客
04-02 396
瀑布流布局的实现方案 HTML5+CSS3+JAVASCRIPT
基于vue的固定宽度图片瀑布流组件
s00890161的博客
10-13 378
基于vue的固定宽度图片瀑布流组件
Vue3实现简单的瀑布流效果，可抽离成组件直接使用
weixin_43312391的博客
05-23 2054
Vue3实现瀑布流效果，组件已封装，直接使用即可。
基于jQuery的图片瀑布流效果实现与优化
在这个“waterfall 瀑布流 demo”项目中，使用了jQuery这一轻量级JavaScript库来实现瀑布流布局。jQuery是一个快速、简洁的JavaScript库，它通过封装DOM操作、事件处理、动画和AJAX等操作，简化了JavaScript编程。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值