扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > html >如何利用Bootstrap实现瀑布流布局
  • 203

0
分享到

如何利用Bootstrap实现瀑布流布局

2024-04-02 19:04:59 203人浏览 薄情痞子
摘要

这篇文章主要介绍了如何利用Bootstrap实现瀑布流布局，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。一、案例介绍瀑布流是近几年流行起来的

这篇文章主要介绍了如何利用Bootstrap实现瀑布流布局，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

一、案例介绍

瀑布流是近几年流行起来的一种网页布局，视觉表现为参差不齐的多栏布局，本案例便是使用 Bootstrap 实现一个瀑布流布局。

如何利用Bootstrap实现瀑布流布局

二、相关的 Bootstrap 知识点

2.1 配置 Bootstrap

2.1.1 首先去 Bootstrap 官网（bootCSS.com）下载“用于生产环境的Bootstrap”。
2.1.2 在 <head> 标签内引入 CSS 文件夹内的经过压缩的 bootstrap.min.css。
2.1.3 因为 Bootstrap 的 js 插件是依赖 Jquery 的，所以想用他的 JS 插件必须先引入 jQuery ，然后再引入 JS 文件夹下的 bootstrap.min.js。
<!--BootstrapCSS文件，放在<head>内-->
<link type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!--jQuery文件，引入BootstrapJS插件前必需引入-->
<script language="javascript" type="text/javascript" src="Http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<!--BootstrapJS文件，一般放在底部-->
<script language="javascript" type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--让IE使用最新的渲染模式，支持css3-->
<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
<!--如果IE版本低于IE9，使浏览器支持HTML5和CSS3-->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

2.2 栅格系统

官方解释：Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。它包含了易于使用的预定义类。

简单来说，就是 Bootstrap 为了快速布局从外到内写好了三类样式：

  • 外层的固定宽度 .container 或 100% 宽度 .container-fluid 样式；

  • 行 .row 样式，必须包含在 .container 或 .container-fluid 中；

  • 列 .col-md-*（* 可以是 1 到 12，此处代表中等屏幕按此标准显示，.col-md-1 占 .row 的 1/12，.col-md-12 占 .row 的 12/12）或列偏移 .col-md-offset-*（* 可以是 1 到 12），包含在 .row 容器中，从而快速进行栅格布局。

.col-md-* 示例：

<!--代码部分-->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
    </div>
    <div class="row">
        <div class="col-md-1">1/12</div>
        <div class="col-md-3">3/12</div>
        <div class="col-md-4">4/12</div>
        <div class="col-md-4">4/12</div>
    </div>
    <div class="row">
        <div class="col-md-6">6/12</div>
        <div class="col-md-6">6/12</div>
    </div>
</div>

.col-md-* 效果图：

如何利用Bootstrap实现瀑布流布局

使用列偏移 .col-md-offset-* 示例：

<!--代码部分-->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <!--这里向右偏移4/12-->
        <div class="col-md-1 col-md-offset-4">1/12</div>
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
    </div>
    <div class="row">
        <div class="col-md-3 col-md-offset-1">3/12</div>
        <div class="col-md-4 col-md-offset-4">4/12</div>
    </div>
    <div class="row">
        <div class="col-md-4  col-md-offset-4">6/12</div>
    </div>
</div>

.col-md-offset-* 效果图：

如何利用Bootstrap实现瀑布流布局

另外需要注意的是，不管 .col-md-* 和 .col-md-offset-* 怎么搭配使用都要保证 * 总和不超过 12，不然会发生断行现象。

2.3 缩略图

缩略图最常出现的是在产品的展示页，最常见的比如一些购物网站的商品展示。

缩略图需要配合上面所介绍的栅格系统来使用，使用方法是把 <img> 标签包在带 .thumbnail 样式的容器里面，如果我们想添加一段文字描述，可以在里面添加一个样式为 .caption 的容器。

.thumbnail 示例：

<!--代码部分-->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <div class="thumbnail">
                <img src="img/1.jpg">
                <div class="caption">
                    <h5>标题 - 缩略图</h5>
                    <small>我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述。</small>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="thumbnail">
                <img src="img/1.jpg">
                <div class="caption">
                    <h5>标题 - 缩略图</h5>
                    <small>我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述。</small>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="thumbnail">
                <img src="img/1.jpg">
                <div class="caption">
                    <h5>标题 - 缩略图</h5>
                    <small>我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述。</small>
                </div>
            </div>
        </div>
    </div>
</div>

.thumbnail 效果图：

如何利用Bootstrap实现瀑布流布局

2.4 响应式图片

为了让图片适应容器的大小，可以为图片添加 .img-responsive 样式。

.img-responsive 示例：

<img src="img/1.jpg" class="img-responsive" alt="响应式图片">

另外还可以添加 img-rounded/img-circle/img-thumbnail 让图片呈现圆角/圆形/缩略图的形状。

改变图片形状示例：

<!--代码部分-->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <img src="img/1.jpg" class="img-responsive img-rounded" alt="圆角">
        </div>
        <div class="col-md-4">
            <img src="img/1.jpg" class="img-responsive img-circle" alt="圆形">
        </div>
        <div class="col-md-4">
            <img src="img/1.jpg" class="img-responsive img-thumbnail" alt="缩略图">
        </div>
    </div>
</div>

改变图片形状效果图：

如何利用Bootstrap实现瀑布流布局

三、瀑布流布局实战

3.1 排列图片

看完了上面的内容，下面就开始实战了。首先用栅格结构搭建一个放图片的区域，这里我们在左右各留 1/12 的空白。

<!--代码部分-->
<section class="container-fluid">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
        <!--这里放图片-->
        </div>
    </div>
</section>

效果图：

如何利用Bootstrap实现瀑布流布局

然后用上面所看到的带描述的缩略图样式，每个缩略图又占这中间 10/12（看作一个整体）的 4/12，每行放三个缩略图，放三行。缩略图里的图片用响应式图片的样式 .img-responsive 和圆角样式 .img-rounded 修饰下。

<!--代码部分-->
<section class="container-fluid">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <!--图片开始-->
            <div class="col-md-4">
                <div class="thumbnail">
                    <a href="javascript:void(0);">
                        <img src="img/1.jpg" class="img-responsive img-rounded">
                    </a>
                    <div class="caption">
                        <h5>标题 - 实战</h5>
                        <p>
                            <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</small>
                        </p>
                    </div> 
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <a href="javascript:void(0);">
                        <img src="img/2.jpg" class="img-responsive img-rounded">
                    </a>
                    <div class="caption">
                        <h5>标题 - 实战</h5>
                        <p>
                            <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</small>
                        </p>
                    </div> 
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <a href="javascript:void(0);">
                        <img src="img/3.jpg" class="img-responsive img-rounded">
                    </a>
                    <div class="caption">
                        <h5>标题 - 实战</h5>
                        <p>
                            <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</small>
                        </p>
                    </div> 
                </div>
            </div>
            <!--第四到第九个缩略图-->
            ...
            ...
            ...
            ...
            ...
            ...
            <!--图片结束-->
        </div>
    </div>
</section>

效果图：

如何利用Bootstrap实现瀑布流布局

3.2 实现瀑布流

到这里已经把图片排列好了，但是看起来怪怪的，因为上下图片之间有一片空隙，看起来很不美观，我们的瀑布流的特点是宽度一致，高度自适应布局。目前已经实现了宽度一致，要想实现高度自适应要用到 CSS3 中的一个样式 column-width。

官方解释：设置或检索对象每列的宽度，对应的脚本特性为 columnWidth。

给容器加了 column-width 这个样式时，浏览器会给你计算容器里面的 <div> 应该显示多少列，计算一个相对合理的布局方式。

首先我们给缩略图外部的容器加一个 id="container"。

<!--代码部分-->
<div class="row">
    <div class="col-md-10 col-md-offset-1" id="container">
        <!--图片开始-->
        <div class="col-md-4">
            <div class="thumbnail">

然后为这个 id 加上 column-width 样式。

<!--代码部分-->
#container{
    -WEBkit-column-width:354px; 
    -moz-column-width:354px; 
    -o-column-width:354px; 
    -ms-column-width:354px; 
    column-width:354px;
}
#container>div{
    width:354px; 
    overflow:auto; 
}

效果图：

如何利用Bootstrap实现瀑布流布局

因为现在主流浏览器（Chrome/Firefox/Opera/Safari）都已经支持了 CSS 变量，为了方便调试和维护，上面的 CSS 代码也可以这么写。

<!--代码部分-->
body{
    body{
    font-family:"微软雅黑";
    --img-width:354px; 
}
#container{
    -webkit-column-width:var(--img-width); 
    -moz-column-width:var(--img-width);
    -o-column-width:var(--img-width);
    -ms-column-width:var(--img-width);
    column-width:var(--img-width);
}

#container>div{
    width:var(--img-width);
    overflow:auto;
}

到这里我们的 Bootstrap 瀑布流布局就完成了，一步步完成下来还是很简单的

演示地址：https://mazey.cn/bootstrap-blueprints/lesson-first-waterfall/index.html

源码地址：https://GitHub.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-first-waterfall

3.3 扩展

除了用 CSS3 实现瀑布流之外，还可以用 JavaScript 来实现这个效果，参考代码如下。

//页面加载完之后再加载瀑布流
window.onload = function(){
    //这里引用col-md-4是因为在盒子里包裹图片没有其他作用，如果不想冲突也可以创建其他Class
    loadWaterfall('container','col-md-4');
}

//加载瀑布流函数//思路来自Amy老师
function loadWaterfall(boxID,thumbnailClass){
    //获取装缩略图外部的盒子
    var box = document.getElementById(boxID);
    //获取装缩略图的数组
    var thumbnail = box.getElementsByClassName(thumbnailClass);
    //获取每个缩略图的宽度
    var thumbnailWidth = thumbnail[0].offsetWidth;
    //计算盒子内每行可以排列几个缩略图
    var colCount = Math.floor((document.documentElement.clientWidth*(10/12))/thumbnailWidth);
    //创建放每次整理好的高度数组
    var thumbnailHeightArr = [];
    for(var i = 0; i < thumbnail.length; i++){
        //获取第一行高度数组
        if(i < colCount){
            thumbnailHeightArr.push(thumbnail[i].offsetHeight);
        }else{
            //获取之前最小高度
            var minHeight = Math.min.apply(null,thumbnailHeightArr);
            //第一行最小高度索引
            var minIndex = thumbnailHeightArr.indexOf(minHeight);
            //将此缩略图放在上面那行最小高度下面
            thumbnail[i].style.position = 'absolute';
            //距离顶部长度为这个缩略图上面那个缩略图的长度
            thumbnail[i].style.top = minHeight + 'px';
            //距离左边长度为这个缩略图上面那个缩略图距离左边的长度
            thumbnail[i].style.left = thumbnail[minIndex].offsetLeft + 'px';
            //更新最小高度
            thumbnailHeightArr[minIndex] += thumbnail[i].offsetHeight;
        }
    }
}

用 JavaScript 实现瀑布流最明显的一个好处就是对于 IE 的兼容性更好一些，因为 windows7 捆绑安装 IE 浏览器的缘故，国内使用 IE 的群体非常庞大，这使得我们在制作网页时不得不考虑 IE 浏览器的兼容问题。

JavaScript 实现瀑布流参考源码地址：https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-first-waterfall-javascript

感谢你能够认真阅读完这篇文章，希望小编分享的“如何利用Bootstrap实现瀑布流布局”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网html频道，更多相关知识等着你来学习!

--结束END--

本文标题: 如何利用Bootstrap实现瀑布流布局

本文链接: https://lsjlt.com/news/87692.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何利用Bootstrap实现瀑布流布局
    这篇文章主要介绍了如何利用Bootstrap实现瀑布流布局，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。一、案例介绍瀑布流是近几年流行起来的...
    99+
    2024-04-02
  • 如何使用Bootstrap实现瀑布流布局
    这篇文章将为大家详细讲解有关如何使用Bootstrap实现瀑布流布局，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。一、案例介绍瀑布流是近几年流行起来的一种网页布局，视觉表...
    99+
    2024-04-02
  • 如何用js实现瀑布流布局
    这篇“如何用js实现瀑布流布局”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“如何用js实现瀑布流布局”文章吧。一、前端代码编...
    99+
    2023-07-05
  • jquery如何实现瀑布流布局
    这篇文章将为大家详细讲解有关jquery如何实现瀑布流布局，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。1.看看效果吧！2.html代码index.html<!DO...
    99+
    2024-04-02
  • JavaScript如何实现瀑布流布局
    这篇文章将为大家详细讲解有关JavaScript如何实现瀑布流布局，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。就是一堆等宽不等高的数据块组成的页面，如图： 现在好多网站...
    99+
    2024-04-02
  • JavaScriptL如何实现瀑布流布局
    这篇“JavaScriptL如何实现瀑布流布局”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇...
    99+
    2024-04-02
  • HTML中如何实现瀑布流布局
    这篇文章将为大家详细讲解有关HTML中如何实现瀑布流布局，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。第一种方式：使用JavaScript：<!DOCTYPE&nb...
    99+
    2024-04-02
  • AJAX实现瀑布流布局
    这篇文章给大家分享的是有关AJAX实现瀑布流布局的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。瀑布流是当前一种比较流行的网站界面布局方式，参差不齐的多栏布局以及到达底部自动加载的方式，使网站在视觉和用户体验上都能...
    99+
    2023-06-08
  • 如何用JS实现网页瀑布流布局
    目录前言： 什么是瀑布流布局： 如何实现： 1. 获取图片2. 设置图片宽带3. 计算浏览器页面一行最多能存放图片的数量4. 比较图片高度 5. 得到上一行中最小高度图片的位置6. ...
    99+
    2024-04-02
  • 如何使用纯css实现瀑布流布局
    这篇文章主要为大家展示了“如何使用纯css实现瀑布流布局”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用纯css实现瀑布流布局”这篇文章吧。 　　1、纯...
    99+
    2024-04-02
  • 如何使用Css Flex 弹性布局实现瀑布流布局
    随着网页设计的不断发展，瀑布流布局成为了一种非常流行的页面布局方式。与传统的网格布局不同，瀑布流布局能够自适应屏幕大小，并且呈现出独特的流动感。在本文中，我们将介绍如何使用CSS Flex 弹性布局来实现瀑布流布局，并提供具体的代码示例。C...
    99+
    2023-10-21
    瀑布流布局 弹性布局 CSS flex
  • Ionic3如何实现图片瀑布流布局
    小编给大家分享一下Ionic3如何实现图片瀑布流布局，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！首先创建一个项目，这里不多做介...
    99+
    2024-04-02
  • 如何在css中实现瀑布流布局
    这期内容当中小编将会给大家带来有关如何在css中实现瀑布流布局，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。1.multi-column多列布局实现瀑布流先简单的讲下multi-column相关的部分属性...
    99+
    2023-06-15
  • JavaScript如何实现瀑布流布局效果
    这篇文章主要讲解了“JavaScript如何实现瀑布流布局效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript如何实现瀑布流布局效果”吧！如何实现思路：将内容宽度一致，高度...
    99+
    2023-07-06
  • 怎么实现瀑布流布局
    本篇文章给大家分享的是有关怎么实现瀑布流布局，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。一、JS 实现瀑布流思路分析瀑布流布局的特点是等宽不等高。为了让最后一行的差距最小，从...
    99+
    2023-06-09
  • 如何使用JS或CSS实现瀑布流布局
    本篇内容主要讲解“如何使用JS或CSS实现瀑布流布局”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何使用JS或CSS实现瀑布流布局”吧!本着实用精神，我们今天...
    99+
    2024-04-02
  • 如何使用HTML和CSS实现瀑布流布局
    如何使用HTML和CSS实现瀑布流布局瀑布流布局（Waterfall Layout）是一种常见的网页布局方式，它可以使网页内容呈现出像瀑布流一样的效果，每一列的高度可以不同，让网页看起来更加有趣和动感。在这篇文章中，我们将介绍如何使用HTM...
    99+
    2023-10-24
    CSS html 瀑布流布局
  • JQuery实现简单瀑布流布局
    本文实例为大家分享了JQuery实现简单瀑布流布局的具体代码，供大家参考，具体内容如下 分享一个基于JQuery实现的瀑布流布局，效果如下：  实现代码如下，欢迎大家复制...
    99+
    2024-04-02
  • JavaScript实现瀑布流布局详解
    目录需求思路代码实现实现效果问题和修正修正后效果总结需求 所谓瀑布流布局，就是含有若干个等宽的列，每一列分别放置图片、视频等，放置的元素都是等宽的，因此可能是不等高的。新的元素到来时...
    99+
    2024-04-02
  • uniapp瀑布流布局怎么实现
    要实现uniapp中的瀑布流布局，可以使用uniapp提供的mescroll组件，通过配置该组件实现瀑布流效果。以下是实现瀑布流布局...
    99+
    2024-03-08
    uniapp
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作