开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

jquery 瀑布流代码

瀑布流布局是一种流行的网页布局方式，它将元素垂直排列，每一列的高度根据内容的多少动态调整，以达到视觉上的平衡。jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，可以用来简化 HTML 文档遍历、事件处理、动画和 Ajax 交互。

以下是一个简单的 jQuery 瀑布流布局的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 瀑布流布局</title>
<style>
  .container {
    position: relative;
    width: 80%;
    margin: 0 auto;
  }
  .item {
    position: absolute;
    width: 200px;
    background: #ccc;
    margin: 5px;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 5px;
  }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container">
  <!-- 瀑布流项将在这里动态生成 -->
</div>

<script>
$(document).ready(function() {
  var container = $('.container');
  var itemWidth = 200; // 每个瀑布流项的宽度
  var columns = Math.floor(container.width() / itemWidth); // 计算列数
  var items = [
    { height: 200 },
    { height: 300 },
    { height: 250 },
    // ... 更多项
  ];

  // 初始化布局
  function layout() {
    var columnHeights = new Array(columns).fill(0); // 初始化每列的高度
    items.forEach(function(item, index) {
      var minHeightIndex = columnHeights.indexOf(Math.min(...columnHeights)); // 找到最短的列
      var left = minHeightIndex * itemWidth; // 计算左边距
      var top = columnHeights[minHeightIndex]; // 计算上边距
      $(container).append('<div class="item" style="left:' + left + 'px;top:' + top + 'px;height:' + item.height + 'px;"></div>');
      columnHeights[minHeightIndex] += item.height + 5; // 更新列高度
    });
  }

  // 监听窗口大小变化，重新布局
  $(window).resize(function() {
    items = $('.item'); // 重新获取所有瀑布流项
    items.remove(); // 移除所有项
    layout(); // 重新布局
  });

  layout(); // 初始布局
});
</script>
</body>
</html>

在这个示例中，我们首先定义了一个容器 .container 和瀑布流项 .item 的样式。然后使用 jQuery 在文档加载完成后执行布局函数 layout()，该函数计算每列的高度，并将每个瀑布流项放置到最短的列中。同时，我们还监听了窗口大小的变化，以便在窗口调整大小时重新布局。

这种布局方式的优势在于它可以很好地适应不同屏幕尺寸，提供流畅的视觉体验，并且可以灵活地添加或删除内容项而不会破坏整体布局。

应用场景包括图片展示、商品列表、新闻列表等需要动态调整布局以适应不同屏幕和内容数量的场景。

如果你在使用 jQuery 瀑布流布局时遇到问题，可能的原因包括：

jQuery 库未正确加载。
容器或项的样式设置不正确。
窗口大小变化事件未正确绑定。
JavaScript 代码中存在逻辑错误。

解决这些问题的方法包括：

确保 jQuery 库已正确引入。
检查并调整 CSS 样式。
确保窗口大小变化事件正确绑定并处理。
使用浏览器的开发者工具检查控制台输出，查找可能的 JavaScript 错误并进行修正。

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

有帮助

没帮助

相关·内容

容易好用的jQuery瀑布流插件Wookmark

Wookmark jQuery插件大致使用position:absolute来重构内容实现瀑布流布局！...> HTML代码结构： ...src="images/2.jpg"> 简单用法：在html文件中添加代码...> jQuery(function($){ $('#tiles li').wookmark({ //这里是要实现瀑布流布局的对象 autoResize: true, //设置成true...插件下载地址：https://github.com/desandro/imagesloaded 在wookmark插件引用文件之前引用jquery.imagesloaded.js文件使用代码： function

1.3K3 0

jquery瀑布流插件(WookMark)

谈起Wookmark我想做过前端的大侠都不会觉得陌生，它就是远近闻名的流布局jQuery插件，这个插件使用起来非常简单，需要引入两个js： jquery-1.10.2....min.js"> jquery.wookmark.min.js"> jquery实例：Wookmark使用方法引入核心文件 jquery --> jquery.min.js"> jquery.wookmark.js"> 构建html <!

1.6K3 0

jQuery 实现瀑布流个人完美版

前面已经通过这种方式实现过瀑布流了。看到慕课网上有一个类似的视频教程，就仔细看了一下。就大体实现思路来说，基本是没差的。...但其jquery方法，我还是学到一点的。就是如何查找数值在数组中的索引。...html+css结构查看：http://blog.csdn.net/fungleo/article/details/49179611 jQuery实现瀑布流 $(function(){ var...jquery的和他一样。

1K0 0

自己用jQuery写一个瀑布流

自己用jQuery写一个瀑布流前言这个月一直在忙工作。一直没有机会学习新的知识。前两天，突然想写一个瀑布流代码。倒不是找不到瀑布流代码。而是我想自己练练脑子。首先，先考虑思路。...然后用jQuery来找出它应该排在什么位置。最终，达成瀑布流的效果。想再多没用。开干。构建html构架瀑布流jquery版本测试...jquery 实战第二回合 /* FengWaterFall.beta2.js 完美实现了瀑布流效果。其中使用的是for循环来查找索引。...jquery嘛，应该用jquery的方法来实现。 jquery 实战第三回合 /* FengWaterFall.beta3.js 完美实现了瀑布流效果。

1.2K1 0

响应式jquery瀑布流结合图片延迟加载特效

此作品是一款非常实用的jquery特效，结合了两个jquery插件jquery瀑布流插件blocksit和图片延迟加载插件jquery.lazyload，网站上分享过很多款瀑布流作品，可是很多网友们都觉得不是很懂...实现功能的jquery代码如下： $(function(){ $("img.lazy").lazyload({ load:function(){

5.2K1 0

15.瀑布流、测量

e.printStackTrace(); return null; } } @Override public String getKey() { return "hot"; } } DrawableUtils ：用代码创建状态选择器...stateListDrawable.addState(new int[]{}, normalDrawable);// 抬起显示的图片 return stateListDrawable; } TopFragment ：使用代码创建

1.7K7 0

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

博客地址：https://ainyi.com/60 现在百度图片，360 图片搜索，都是以一种瀑布流的形式展示，那么接下来，分享一波纯 css 瀑布流和 js 瀑布流纯 css 写瀑布流 multi-columns...-- more items --> .masonry 是瀑布流容器，里面放置了列表 item，在 .masonry 中设置 column-count（列数）和 column-gap（列间距...max-width: 500px) { .masonry { column-count: 1; /* two columns on larger phones */ } } 那么以上代码产生的效果是...，每一块 item 都是从上往下排列，不能做到从左往右排列： [kc4aje4u6f.jpeg] 这样子若是动态加载图片的瀑布流，体验就会很不好我们想要的是这样： [no351tx20r.jpeg]...要实现如上，只能通过 js 来写瀑布流 js 写瀑布流 html 结构与上面类似，但这里我用图片来做示例

2.6K4 0

瀑布流组件vue-waterfall

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

3.8K6 0

JQuery实现瀑布流布局

分享一个基于JQuery实现的瀑布流布局，效果如下：实现代码如下，欢迎大家复制粘贴。瀑布流布局案例 * { padding: 0; margin...// 调用瀑布流函数 waterfall('main', 'item'); // 模拟json数据 var result = {.../images/' + $(value).attr('src')).appendTo($box); }); // 调用瀑布流功能函数...让加载的图片按规则排列 waterfall(); }; } }); // 瀑布流功能函数

1.4K2 0

干货 | 如何实现jQuery响应式瀑布流？

开门见山，本文介绍响应式的瀑布流的实现方法。最终效果图如下，改变浏览器大小效果更棒哦~ ?...以下我们将每个瀑布流盒子简称为box 使用数组记录每个box宽和高 ---- 设置不同屏幕宽度下每一行box的数量使用$(window).width()获取屏幕宽度根据不同屏幕宽度设置每一行box的数量...absolute";this.width = width;this.height = height;this.top = top;this.left = left;} 创建数组记录元素宽高这里简述一下瀑布流原理...添加后该列高度则加上该box高度，以此类推设置每个元素宽度，高度自定义auto 创建数组boxStyleArr来保存每个元素宽高使用数组boxArr保存每一竖列的高度，即每一竖列最后一个box的底部位置使用瀑布流原理计算每个...= boxStyleArr[index].height;boxStyleArr[index].left = boxWidth * index;boxStyleArr[index].top = 0;//瀑布流原理计算每个

2K2 0

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

博客地址：https://ainyi.com/60 分享一次纯 css 瀑布流和 js 瀑布流纯 css 写瀑布流 1.multi-columns 方式：通过 Multi-columns 相关的属性...-- more items --> 51 .masonry 是瀑布流容器，里面放置了列表 item，在 .masonry 中设置 column-count...看到这里，我们可以发现，使用纯 css 写瀑布流，每一块 item 都是从上往下排列，不能做到从左往右排列： ? 这样子若是动态加载图片的瀑布流，体验就会很不好我们想要的是这样： ?...这样做只能通过 js 来写瀑布流 js 写瀑布流： html 结构与上面类似，这里我用图片来做示例： 1 2 瀑布流效果欢迎浏览 GitHub：https://github.com/Krryxa 博客地址：https://ainyi.com/60

9.2K4 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{ // 瀑布流多列情况...self.rowSpacing; } } attributes.frame = CGRectMake(itemX, itemY , itemWidth, itemHeight); 以上就是核心代码和思路...，具体代码请下载源码 3、需要重写的方法继承UICollectionViewLayout重写以下方法 /// 1、初始化数据源 - (void)prepareLayout /// 2、计算每个Attribute

2.2K1 0

原生javascript 实现瀑布流

前言刚用 jquery 实现了瀑布流效果。但是其实现方法，我并不满意，所以我还在思考，如何更加简单明了的实现瀑布流效果。...与其缠绕在 jquery 里，不如直接跳到 javascript 原生方法里。让我们抛开 jquery，忘掉各种高级方法，用最原始的方法去实现瀑布流效果。...javascript版本的瀑布流代码原理已经写在注释里了。不再重复 /* 瀑布流原生 javascript 实现方法之前已经用 jquery 方法已经实现了瀑布流。...function WaterFall(){ var _blank = 20, // 瀑布流间距 _liW = 200 + _blank...明天再利用这个方法，把 jquery 版的代码再经过优化。应该就更简单了！ FungLeo 2015.10.16

1.5K2 0

图片瀑布流，so easy！

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

1.8K1 0

简单瀑布流

瀑布流什么是瀑布流又称为瀑布流布局，是一种比较经典的网站布局方式，尤其多见于图片较多的页面。常见有两种瀑布流方式。...3 列的 li 标签高度集合] 统计出那一列最低和对应的下标(0,1,2) 将下一个 li 标签放在对应下标的位置，同时计算出下标对应列的高度总和，设置为即将显示的 li 标签的 top 代码

2691 0

iOS 瀑布流封装

瀑布流.gif 功能描述：WSLWaterFlowLayout 是在继承于UICollectionViewLayout的基础上封装的带头脚视图的瀑布流控件。...目前支持竖向瀑布流(item等宽不等高、支持头脚视图)、水平瀑布流(item等高不等宽不支持头脚视图)、竖向瀑布流( item等高不等宽、支持头脚视图)三种样式的瀑布流布局。...下面是WSLWaterFlowLayout.h中的属性方法和代理方法，含义注释的还算清晰： typedef enum { WSLVerticalWaterFlow = 0, /** 竖向瀑布流...item等宽不等高 */ WSLHorizontalWaterFlow = 1, /** 水平瀑布流 item等高不等宽不支持头脚视图*/ WSLVHWaterFlow = 2, /...*/ @property (nonatomic, assign) WSLFlowLayoutStyle flowLayoutStyle; @end 初始化仅三行代码，只需设置代理和样式，item的大小

2.2K8 0

iOS瀑布流

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

1.6K4 0

多个Listview瀑布流效果

多个Listview瀑布流效果效果展示原理解释自定义MyLinearLayout，继承至LinearLayout，在布局文件中，将3个listview放置在MyLinearLayout中。...代码实现界面布局 <jamffy.example.waterfalllistview.MyLinearLayout xmlns:android="http:// schemas.android.com...(2).dispatchTouchEvent(event); return true; } return true; } } 完整代码

1.4K7 0

浅析瀑布流布局及其原理视频_jquery瀑布流布局

一、什么是瀑布流很多时候我们会看到一些Vlog网站或者展示图片的网站，它们的图片明明每一张的高度大小都不同，但是却能自动地适应，排成一行一行地展示，并且下拉到底的时候，加载的图片也会自动适应，这就是瀑布流...四、瀑布流的核心实现瀑布流的核心其实就两个：找出图片高度最小的那一列，再那一列插入，然后继续找下一个高度最小的，一直循环直到插满图片为止；计算出每一列距离浏览器整体的距离，也就是position里的...当你知道某一列的left的时候，相当于就知道了在它下面插入图片时，图片如何定位到这一列了，只要图片的left值和列是一样的，那么图片自然就插入到列里面了实现代码如下： var data=[ {"src...true:false; } // 追加瀑布流效果 function appendBox(wrap,boxes){ // 先判断是否展示到了底部 if(getBottom(wrap)){ for (i in...div>" wrap.append(addstr) } }else{ return false } waterfall(wrap,wrap.children('div')) } 注意：这里面我还加入了瀑布流追加的效果

1.5K2 0

iOS 瀑布流封装

[瀑布流.gif] 功能描述：WSLWaterFlowLayout 是在继承于UICollectionViewLayout的基础上封装的带头脚视图的瀑布流控件。...目前支持竖向瀑布流(item等宽不等高、支持头脚视图)、水平瀑布流(item等高不等宽不支持头脚视图)、竖向瀑布流( item等高不等宽、支持头脚视图)三种样式的瀑布流布局。...下面是WSLWaterFlowLayout.h中的属性方法和代理方法，含义注释的还算清晰： typedef enum { WSLVerticalWaterFlow = 0, /** 竖向瀑布流...item等宽不等高 */ WSLHorizontalWaterFlow = 1, /** 水平瀑布流 item等高不等宽不支持头脚视图*/ WSLVHWaterFlow = 2, /...*/ @property (nonatomic, assign) WSLFlowLayoutStyle flowLayoutStyle; @end 初始化仅三行代码，只需设置代理和样式，item的大小

1.8K8 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭