超简单！bootstrap3+Masonry 实现瀑布流排版

最新推荐文章于 2024-07-06 17:13:35 发布
最新推荐文章于 2024-07-06 17:13:35 发布
阅读量2k 收藏 7
点赞数 2
文章标签： bootstrap html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43478623/article/details/107600962
版权
本文介绍了如何在Bootstrap3中通过Masonry实现瀑布流排版，解决了栅格系统在区块高度不一致时的排版问题。通过在HTML页脚添加JS代码，为Bootstrap的class添加Masonry样式，并使用imagesLoaded套件解决图片加载重叠问题，成功打造美观的瀑布流效果。
摘要由CSDN通过智能技术生成

排版太丑！怎么解决？

Bootstrap3中通常使用栅格系统(grid system)来创建页面布局。但是如果区块高度不一致（e.g. 竖图/横图)，会出现内容空缺的情况。比如下图中的勾画处。

在这里插入图片描述
为了让页面布局更美观，同时更加合理的利用页面空间，当前目标是要实现瀑布流排版！（通俗来说，瀑布流布局好比俄罗斯方块，尽量让尺寸合适的区块填进空白处）
解决方法： 用Masonry套件整合Bootstrap3

找到方法！怎么实现？

1. html页脚加JS代码

将下面的代码段加在</body>前

<!-- masonry plugin -->
<script src="https://unpkg.com/mason
最低0.47元/天 解锁文章
Richhhzzz
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
bootstrap+masonry.js写瀑布流
JH0610Y的专栏
03-28 1万+
最近在用bootstrap写一个网站，其中有个图文展示的页面要用到瀑布流的效果。 因为项目要求，项目要以bootstrap为基准，不准私自添加内联样式、内部样式，所以，自己写瀑布流就不行了，所以，根据要求，百度查找相关资料，看到masonry.js. 个人认为这是一个非常好用的瀑布流插件。 下面说一下我在引用的过程中遇到的问题，一开始我用bootstrap栅格系统布局，代码如下
Bootstrap响应式布局瀑布流
02-14 1892
瀑布流最常用的插件莫属Masonry。它通过将不同高度的内容排列组合在最佳的位置，就像砌墙一样从上到下无缝的组合在一起。 Bootstrap是当下比较热门的web前端开发框架之一，通过引入Bootstrap，你可以很快的给你的项目做一个自适应的页面。 为什么需要Masonry 在某些项目中，我们可能需要展示一些产品、主题或者项目等，通过网格的形式排列在一起，由于每个内容的...
用Bootstrap实现mansory网格瀑布流布局插件
ICode联盟
08-24 461
通过该插件可以非常轻松的实现瀑布流效果，它通过断点来控制响应式效果，非常实用。columnClasses：添加到网格上的额外的class。lg：视口尺寸大于1200像素。md：视口尺寸大于992像素，小于1200像素。sm：视口尺寸大于720像素，小于992像素。xs：视口尺寸小于720像素。distributeBy：排序选项：order：如果设置为true，网格项按默认的顺序排列。height：如果设置为true，没列的高度使用分配项的最小高度。attrOrder：升序或降序："asc"/"desc"。.
【JavaScript脚本宇宙】美化网格布局：Isotope和Masonry让你的网页焕然一新
最新发布
记录我的学习历程
07-06 757
本文将介绍6个实用的JavaScript库，涵盖了无限滚动、响应式网格布局、元素可见性监测、图片延迟加载、虚拟列表、以及网格布局美化等主题。每个库都有详细的简介、安装配置说明和API概览，帮助开发者快速上手和应用这些功能强大的工具。
bootstrap图片瀑布布局 Masonry插件
01-18
bootstrap配合Masonry插件实现瀑布式布局 详细内容请看： http://blog.csdn.net/wild46cat/article/details/54600513
瀑布流布局
zhangyingji
07-22 608
思路 固定列数的浮动布局： 1. 根据设备屏幕的宽度和加载图片的宽度来固定列数，之后又获取每一列图片的高度，将要加载的图片放在高度最小的那一列图片下面，循环数组不断的寻找高度最小的那一列图片，将图片放在下面实现基本的布局效果。 2. 创建一个滚动条监听事件（当最后一张图片距顶的高度 &amp;amp;lt; 屏幕的高度+滚动条滚动的距离）时，就触发我们在页面动态的添加图片的事件（用JavasSript在Ht...
Bootstrap实战 - 瀑布流布局
后除
12-05 3804
讲 Bootstrap 基础的教程网上已经很多了，实际上 Bootstrap 中文网（bootcss.com）里的文档已经写的很详细了，但实战的案例却不多。这里用一些当前流行的网页布局为导向，使用 Bootstrap 中的样式来完成它。每次只讲与案例相关的知识点，边学边练，加强理解。
瀑布流排版
小书包大梦想的博客
06-19 573
let leftHeight = 0; // 左侧列表高度 let rightHeight = 0; // 右侧列表高度 const query = wx.createSelectorQuery() query.select('#leftList').boundingClientRect() // 查询左侧节点 query.select('#rightList').boundingClientRect() // 查询右侧节点 query..
bootstrap+masonry瀑布流
08-27
Bootstrap 和 Masonry 结合使用可以创建出美观且高效的瀑布流布局，这种布局方式常用于图片展示、商品列表等场景，因为它能充分利用空间，使页面看起来更有序且吸引人。接下来，我们将深入探讨这两个工具以及如何将...
Vue Nuxt.js + bootstrap + masonry 实现瀑布流
ardong16的博客
06-24 1757
Vue 下实现瀑布流的插件有很多，但是总是有这样那样的缺点，今天找到一款vue-masonry，可以完美的结合Nuxt.js。 安装 yarn add vue-masonry Nuxt根目录下有个plugins文件夹，创建vue-masonry.js文件 写入下面的内容 import Vue from 'vue' import {VueMasonryPlugin} from 'vue-masonry' Vue.use(VueMasonryPlugin) 在nuxt.config.js文件中添
bootstrap配合Masonry插件实现瀑布式布局
11-30
问题是这样的，使用bootstrap的栅格进行布局的时候，如果大小超过了，会自动的转到下一行，但是在显示图片的时候就会出现缝隙，下面介绍masonry进行缝隙的填补。 好，下面上货。 1、首先是html <html> <head> <title>Title</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/> <script type="text/javascript" src="jquery-2.1.4.min.js"
Bootstrap选项卡与Masonry插件的完美结合
09-02
主要介绍了Bootstrap选项卡与Masonry插件的完美结合的相关资料,需要的朋友可以参考下
bootstrap+imagesLoaded+masonry+carouse瀑布流、轮播图
coologic
04-17 656
介绍 masonry是js瀑布流插件，imagesLoaded可实现对图像加载状态的事件处理。选用masonry是因为此框架不仅适用于img标签，可直接用于div标签，可更好地和bootstrap组合使用。Carouse是bootstrap插件可以实现轮播图效果。下面适用于bootstrap3 瀑布流范例 html代码 <div id="masonry-images" cl...
使用Bootstrap与jQuery实现瀑布流
JaydenCheng的博客
02-12 986
使用Bootstrap与jQuery实现瀑布流
小程序瀑布流排版（图片文字自适应）
qq_59795720的博客
11-29 911
uniapp实现小程序的瀑布流布局，代码简洁一看就会
瀑布流布局的实现
weixin_42274805的博客
09-18 1478
瀑布流布局视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部​​ 瀑布流的实现方法决定了它的元素排序，具体请看我这篇推文。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值