开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js库瀑布流

瀑布流（Waterfall）是一种常见的网页布局方式，在前端开发中，可以使用 JavaScript 库来实现，比如 Masonry 、Isotope 等。

基础概念：瀑布流布局将页面元素按照不同的列进行排列，每列的高度根据内容自适应，形成一种参差不齐但整体美观的视觉效果。

优势：

能够在有限的页面空间内展示更多的内容。
增强页面的视觉吸引力，使布局更具特色。

类型：

纯 CSS 实现的瀑布流，相对简单，但灵活性有限。
借助 JavaScript 库实现的瀑布流，功能更强大，可实现更多自定义效果。

应用场景：

图片展示网站，如摄影作品集。
新闻资讯类网站，以图文并茂的形式呈现内容。
电商产品展示页面。

常见问题及解决方法：

加载新内容时布局错乱：
- 原因：新元素的尺寸导致原有的布局计算失效。
- 解决方法：重新计算布局，触发 JavaScript 库的布局更新方法。

元素加载顺序混乱：
- 原因：异步加载内容时顺序不确定。
- 解决方法：在数据加载完成后，按照正确的顺序插入元素，并重新布局。

示例代码（使用 Masonry 库）：

<!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>瀑布流示例</title>
  <style>
    .grid {
      display: flex;
      margin-left: -10px;
      width: auto;
    }

    .grid-item {
      margin-left: 10px;
      margin-bottom: 10px;
      background-color: #ccc;
      width: 200px;
    }
  </style>
</head>

<body>
  <div class="grid">
    <!-- 瀑布流内容 -->
  </div>

  <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
  <script>
    var elem = document.querySelector('.grid');
    var msnry = new Masonry(elem, {
      // options
      itemSelector: '.grid-item',
      columnWidth: 200,
      gutter: 10
    });

    // 模拟加载新内容
    function loadNewItems() {
      var newItems = '';
      for (var i = 0; i < 5; i++) {
        newItems += '<div class="grid-item">新元素 ' + (i + 1) + '</div>';
      }
      var container = document.querySelector('.grid');
      container.innerHTML += newItems;
      msnry.appended(container.children);
      msnry.layout();
    }

    // 初始加载一些内容
    for (var i = 0; i < 10; i++) {
      var item = document.createElement('div');
      item.className = 'grid-item';
      item.textContent = '元素 ' + (i + 1);
      elem.appendChild(item);
    }
    msnry.layout();

    // 模拟在 3 秒后加载新内容
    setTimeout(loadNewItems, 3000);
  </script>
</body>

</html>

在上述示例中，创建了一个基本的瀑布流布局，并在 3 秒后模拟加载新内容，同时更新布局。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

分享：纯 css 瀑布流和 js 瀑布流

博客地址：https://ainyi.com/60 分享一次纯 css 瀑布流和 js 瀑布流纯 css 写瀑布流 1.multi-columns 方式：通过 Multi-columns 相关的属性...看到这里，我们可以发现，使用纯 css 写瀑布流，每一块 item 都是从上往下排列，不能做到从左往右排列： ? 这样子若是动态加载图片的瀑布流，体验就会很不好我们想要的是这样： ?...这样做只能通过 js 来写瀑布流 js 写瀑布流： html 结构与上面类似，这里我用图片来做示例： 1 2 瀑布流实现方式： css 的绝对定位方式：根据每张图片的位置设置 top 和 left 值： 1 //瀑布流效果 2 //这里有一个坑（已经修复）： 3 //因为是动态加载远程图片，在未加载完全无法获取图片宽高...这实现了横向排列的瀑布流效果欢迎浏览 GitHub：https://github.com/Krryxa 博客地址：https://ainyi.com/60

8.9K4 0

分享一次纯 css 瀑布流和 js 瀑布流

博客地址：https://ainyi.com/60 现在百度图片，360 图片搜索，都是以一种瀑布流的形式展示，那么接下来，分享一波纯 css 瀑布流和 js 瀑布流纯 css 写瀑布流 multi-columns...-- more items --> .masonry 是瀑布流容器，里面放置了列表 item，在 .masonry 中设置 column-count（列数）和 column-gap（列间距...，每一块 item 都是从上往下排列，不能做到从左往右排列： [kc4aje4u6f.jpeg] 这样子若是动态加载图片的瀑布流，体验就会很不好我们想要的是这样： [no351tx20r.jpeg]...要实现如上，只能通过 js 来写瀑布流 js 写瀑布流 html 结构与上面类似，但这里我用图片来做示例 ...瀑布流实现方式 css 的绝对定位方式：根据每张图片的位置设置 top 和 left 值 // 瀑布流效果 // 这里有一个坑（已经修复）： // 因为是动态加载远程图片，在未加载完全无法获取图片宽高

2.4K4 0

JS实现瀑布流页面布局

个人对瀑布流布局理解：每列的宽度相等而高度不等，且第二行的第一个容器需要放在第一行高度最小的容器下面，依次类推放置。...附上代码：代码仅实现了瀑布流的布局方式和 resize 监听，如果大家有需要，可以自己拓展下：实现监听滚动事件，页面滚动加载图片的功能。代码中写了详细注释，可以直接使用。瀑布流布局...JS实现 * { margin: 0;...获取一行最多可以展示几张图片 let nums = Math.floor(pageWidth / (itemWidth + gap)); // 瀑布流实现原则

2.8K4 0

多栏布局与JS实现瀑布流

css3属性之多栏布局与JS实现瀑布流　　　背景：之前打算自己总结一下flex布局的知识点，发现自己无从下手，原因在何处：我反思了一下，其实原因很简单，使用的次数少，更多的时间使用了百分比，浮动和定位解决...column-width宽度时，同时设置盒子的width，否则宽度默认为100%，每栏宽度按栏数平均分；盒子每栏宽度必须大于等于column-width设定的值，否则就会减少栏数来增加每栏宽度 css3多列和JS...实现瀑布流　给自己安利一波吧，看到网上很多瀑布流的效果，哇，简直棒极了有没有；于是我迫不及待的打开V**，打开了pinterest的官网。...自己也梳理梳理逻辑：js代码之前，一定要先搞清逻辑，再动手写代码> 我们都不陌生瀑布流是同宽的，但是高度不一，js主要的工作就是根据高度来进行布局， 1）当一行排满后，准备排第二行的时候，....box .pic img { display: block; width: 100%; } 梳理完了逻辑，该动手写js

3K9 0

分享 1个原生 JS 瀑布流案例

瀑布流布局中的图片有一个核心特点 —— 等宽不定等高，瀑布流布局在国内网网站都有一定规模的使用，比如pinterest、花瓣网等等。那么接下来就基于这个特点开始瀑布流探索之旅。...waterfall-box { float: left; width: 200px; padding-left: 10px; padding-bottom: 10px; } 至此完成了瀑布流的基本布局...联想到业务场景中瀑布流中下拉加载的图片一般都来自 Ajax 异步获取，那么加载的数据必然不能写死在库里，期望能实现如下调用(此处借鉴了 waterfall 的使用方式)， const waterfall...waterfall.on("load", function () { // 此处进行 ajax 同步/异步添加图片 }) 观察调用方式，不难联想到使用发布/订阅模式来实现它，关于发布/订阅模式，之前在Node.js

1.9K2 0

简单瀑布流

瀑布流什么是瀑布流又称为瀑布流布局，是一种比较经典的网站布局方式，尤其多见于图片较多的页面。常见有两种瀑布流方式。

861 0

iOS瀑布流

瀑布流Demo 瀑布流截图.gif 使用UICollectionView实现瀑布流自定义UICollectionViewLayout中的主要代码： YJWaterFlowLayout.h中代码: #import...collectionViewContentSize { return CGSizeMake(0, self.maxColumnHeight + self.edgeInsets.bottom); } @end 瀑布流

1.4K4 0

原生 JS 实现一个瀑布流插件

瀑布流布局中的图片有一个核心特点 —— 等宽不定等高，瀑布流布局在国内外网站都有一定规模的使用，比如pinterest、花瓣网等等。那么接下来就基于这个特点开始瀑布流探索之旅。...waterfall-box { float: left; width: 200px; padding-left: 10px; padding-bottom: 10px; } 至此完成了瀑布流的基本布局...联想到业务场景中瀑布流中下拉加载的图片一般都来自 Ajax 异步获取，那么加载的数据必然不能写死在库里，期望能实现如下调用(此处借鉴了 waterfall 的使用方式)， const waterfall...waterfall.on("load", function () { // 此处进行 ajax 同步/异步添加图片 }) 观察调用方式，不难联想到使用发布/订阅模式来实现它，关于发布/订阅模式，之前在 Node.js

2.4K4 0

iOS 瀑布流封装

[瀑布流.gif] 功能描述：WSLWaterFlowLayout 是在继承于UICollectionViewLayout的基础上封装的带头脚视图的瀑布流控件。...目前支持竖向瀑布流(item等宽不等高、支持头脚视图)、水平瀑布流(item等高不等宽不支持头脚视图)、竖向瀑布流( item等高不等宽、支持头脚视图)三种样式的瀑布流布局。...下面是WSLWaterFlowLayout.h中的属性方法和代理方法，含义注释的还算清晰： typedef enum { WSLVerticalWaterFlow = 0, /** 竖向瀑布流...item等宽不等高 */ WSLHorizontalWaterFlow = 1, /** 水平瀑布流 item等高不等宽不支持头脚视图*/ WSLVHWaterFlow = 2, /...** 竖向瀑布流 item等高不等宽 */ WSLLineWaterFlow = 3 /** 线性布局待完成，敬请期待 */ } WSLFlowLayoutStyle;//样式 @class

1.6K8 0

iOS 瀑布流封装

瀑布流.gif 功能描述：WSLWaterFlowLayout 是在继承于UICollectionViewLayout的基础上封装的带头脚视图的瀑布流控件。...目前支持竖向瀑布流(item等宽不等高、支持头脚视图)、水平瀑布流(item等高不等宽不支持头脚视图)、竖向瀑布流( item等高不等宽、支持头脚视图)三种样式的瀑布流布局。...下面是WSLWaterFlowLayout.h中的属性方法和代理方法，含义注释的还算清晰： typedef enum { WSLVerticalWaterFlow = 0, /** 竖向瀑布流...item等宽不等高 */ WSLHorizontalWaterFlow = 1, /** 水平瀑布流 item等高不等宽不支持头脚视图*/ WSLVHWaterFlow = 2, /...** 竖向瀑布流 item等高不等宽 */ WSLLineWaterFlow = 3 /** 线性布局待完成，敬请期待 */ } WSLFlowLayoutStyle;//样式 @class

2K8 0

【iOS】瀑布流的实现

Simulator Screen Shot - iPhone 8 - 2020-01-16 at 17.32.16.png 2、实现思路根据瀑布流的列数，创建记录maxY的字典，例如两列的瀑布流，就创建两个...itemY = [self.maxYDic[minIndex] floatValue] + self.rowSpacing; } }else{ // 瀑布流多列情况

2K1 0

15.瀑布流、测量

排行界面 TopProtocol ：json数据就是写字符串，所以不需要写bean对象 public class TopProtocol extends Bas...

1.6K7 0

图片瀑布流，so easy！

什么是图片瀑布流用一张花瓣网页的图片布局可以很清楚看出图片瀑布流的样子： ?...简单来说，就是有很多图片平铺在页面上，每张图片的宽度相同，但是高度不同，这样错落有致的排列出 n 列的样子很像瀑布，于是就有了瀑布流图片一说。...实现原理 1、第一种方式第一种方式前提是：图片的宽度固定，但是列可变（根据屏幕大小）通过上面的介绍，我们知道要实现瀑布流的前提是宽度一致（假如为100px），高度可以不相同。...= $('img').outerWidth(); // 200 waterfallHandler(); // 瀑布流处理 function waterfallHandler...这里我们使用js来添加图片，而不是事先写好在html中了。实现代码 <!

1.6K1 0

jquery瀑布流插件(WookMark)

谈起Wookmark我想做过前端的大侠都不会觉得陌生，它就是远近闻名的流布局jQuery插件，这个插件使用起来非常简单，需要引入两个js： js/jquery-1.10.2....min.js"> js/jquery.wookmark.min.js"> jquery实例：Wookmark使用方法引入核心文件 js"> js"> 构建html 写入JS初始化 $('#tiles li').wookmark(); 参数 $('.myElements').wookmark({ align

1.4K3 0

多个Listview瀑布流效果

多个Listview瀑布流效果效果展示原理解释自定义MyLinearLayout，继承至LinearLayout，在布局文件中，将3个listview放置在MyLinearLayout中。

1.2K7 0

原生javascript 实现瀑布流

前言刚用 jquery 实现了瀑布流效果。但是其实现方法，我并不满意，所以我还在思考，如何更加简单明了的实现瀑布流效果。...让我们抛开 jquery，忘掉各种高级方法，用最原始的方法去实现瀑布流效果。...javascript版本的瀑布流代码原理已经写在注释里了。不再重复 /* 瀑布流原生 javascript 实现方法之前已经用 jquery 方法已经实现了瀑布流。...找到需要处理的元素 var _obj = GetId("waterfall"), _ul = GetTag(_obj,"ul"), _li = GetTag(_obj,"li"); // 瀑布流函数...function WaterFall(){ var _blank = 20, // 瀑布流间距 _liW = 200 + _blank

1.4K2 0

瀑布流组件vue-waterfall

坦白直率的言语，最容易打动悲哀的耳朵——莎士比亚分享一个vue瀑布流组件 vue-waterfall git地址：https://github.com/MopTym/vue-waterfall.git

3.6K6 0

SAUI-瀑布流改版（grid）

这一次的瀑布流，是真的瀑布流形式，上一版只是看起来像而已。通过css的grid与js配合，就可以快速形成瀑布流的形式了。不过呢，有点小问题，就是间距（grid-gap），有点小偏差，但是整体不影响。...}, 1000) }) this.hooks.emit('compute-items-rect') } } //业务部分 //wxml //js

1.5K2 0

iOS 瀑布流实现「建议收藏」

array]; //初始化cell信息的字典 _cellInfoDic = [NSMutableDictionary dictionary]; //设置代理为主控制器，我们的瀑布流是继承于系统的流式布局...既然要实现实现瀑布流，就需要比较每一列的高度，然后把要插入的item插入到高度最小的那一列去。因此，我们需要比较每一列的高度，找出最小列。

2.4K4 1

iOS 瀑布流之栅格布局

CGRectMake(x, y, w, h); } 后台下发字段格式示意图功能描述：WSLWaterFlowLayout 是在继承于UICollectionViewLayout的基础上封装的带头脚视图的瀑布流控件...目前支持竖向瀑布流(item等宽不等高、支持头脚视图)、水平瀑布流(item等高不等宽不支持头脚视图)、竖向瀑布流( item等高不等宽、支持头脚视图)、栅格布局瀑布流 4种样式的瀑布流布局。

1.8K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭