Practical combat: Using Bootstrap to implement waterfall flow layout (with code)-Bootstrap Tutorial-php.cn

Home

Web Front-end

Bootstrap Tutorial

Practical combat: Using Bootstrap to implement waterfall flow layout (with code)

青灯夜游

Dec 14, 2021 pm 07:16 PM

bootstrapwaterfall flow layout

This article will share with you a Bootstrap practical experience and introduce how to use Bootstrap to implement waterfall flow layout step by step. I hope it will be helpful to everyone!

Practical combat: Using Bootstrap to implement waterfall flow layout (with code)

There are many tutorials on the basics of Bootstrap online. In fact, the documentation on the Bootstrap Chinese website (bootcss.com) has been written in great detail, but the actual cases are not not much. Here we use some currently popular web page layouts as a guide and use the styles in Bootstrap to complete it. Only the knowledge points related to the case will be taught each time, and you will practice while learning to enhance your understanding. To practice this case, you need to have a basic knowledge of HTML/CSS. [Related recommendations: "bootstrap tutorial"]

1. Case introduction

Waterfall flow is a web page layout that has become popular in recent years. The visual performance is uneven. A neat multi-column layout. This case uses Bootstrap to implement a waterfall flow layout.

Practical combat: Using Bootstrap to implement waterfall flow layout (with code)

2.1 Configure Bootstrap

2.1.1 First go to the official Bootstrap website (bootcss.com) to download "Bootstrap for production".

2.1.2 Introduce the compressed `bootstrap.min.css` in the CSS folder within the tag.

2.1.3 Because Bootstrap’s JS plug-in relies on jQuery, if you want to use its JS plug-in, you must first introduce jQuery, and then introduce `bootstrap.min.js` in the JS folder. .

<!--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" ></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 Grid system

Official explanation: Bootstrap provides a responsive, mobile device-first fluid grid system that changes with the screen or viewport. As the size increases, the system will automatically divide it into up to 12 columns. It contains predefined classes for ease of use.

To put it simply, Bootstrap has written three types of styles from the outside to the inside for quick layout:

Fixed width of the outer layer.container or 100% width .container-fluid style;
row .row style, must be included in .container or . container-fluid Medium;
Column.col-md-* (* can be 1 to 12, which represents the medium screen and is displayed according to this standard , .col-md-1 accounts for 1/12 of .row, .col-md-12 accounts for 12 of .row /12) or column offset .col-md-offset-* (* can be 1 to 12), contained in the .row container, thus Quickly create grid layouts.

.col-md-* Example:

<!--代码部分-->
<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-* Rendering:

Practical combat: Using Bootstrap to implement waterfall flow layout (with code)

Use column offset.col-md-offset-* Example:

<!--代码部分-->
<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-* Rendering:

Practical combat: Using Bootstrap to implement waterfall flow layout (with code)

Also note that, regardless of .col-md-* and .col-md-offset-* No matter how you use them together, make sure that the sum of * does not exceed 12, otherwise line breaks will occur.

2.3 Thumbnails

Thumbnails most commonly appear on product display pages, such as product displays on some shopping websites.

Thumbnails need to be used in conjunction with the grid system introduced above. The method of use is to wrap the <img src="/static/imghwm/default1.png" data-src="img/1.jpg" class="lazy" alt="Practical combat: Using Bootstrap to implement waterfall flow layout (with code)" > tag in a container with the .thumbnail style , if we want to add a text description, we can add a container with the style .caption inside.

.thumbnail Example:

<!--代码部分-->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <div class="thumbnail">
                <img  src="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"   alt="Practical combat: Using Bootstrap to implement waterfall flow layout (with code)" >
                <div class="caption">
                    <h4 id="标题-nbsp-nbsp-缩略图">标题 - 缩略图</h4>
                    <small>我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述。</small>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="thumbnail">
                <img  src="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"   alt="Practical combat: Using Bootstrap to implement waterfall flow layout (with code)" >
                <div class="caption">
                    <h4 id="标题-nbsp-nbsp-缩略图">标题 - 缩略图</h4>
                    <small>我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述。</small>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="thumbnail">
                <img  src="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"   alt="Practical combat: Using Bootstrap to implement waterfall flow layout (with code)" >
                <div class="caption">
                    <h4 id="标题-nbsp-nbsp-缩略图">标题 - 缩略图</h4>
                    <small>我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述，我是缩略图里面的描述。</small>
                </div>
            </div>
        </div>
    </div>
</div>

.thumbnail Rendering:

Practical combat: Using Bootstrap to implement waterfall flow layout (with code)

##2.4 Responsive images

In order to make the image adapt to the size of the container, you can add the

.img-responsive style to the image.

.img-responsive Example:

<img  class="img-responsive lazy" src="/static/imghwm/default1.png" data-src="img/1.jpg" alt="Practical combat: Using Bootstrap to implement waterfall flow layout (with code)" >

You can also add

img-rounded/img-circle/img-thumbnail Make the image appear in a rounded/circular/thumbnail shape.

Example of changing image shape:

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

Changing image shape rendering:

Practical combat: Using Bootstrap to implement waterfall flow layout (with code)

3. Waterfall flow layout practice

3.1 Arrange the pictures

After reading the above content, let’s start the actual combat. First, use a grid structure to build an area for pictures. Here we leave 1/12 of the space on the left and right.

<!--代码部分-->
<section>
    <div>
        <div>
        <!--这里放图片-->
        </div>
    </div>
</section>

Rendering:

Practical combat: Using Bootstrap to implement waterfall flow layout (with code)

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

<!--代码部分-->
<section>
    <div>
        <div>
            <!--图片开始-->
            <div>
                <div>
                    <a>
                        <img  class="img-responsive img-rounded lazy" src="/static/imghwm/default1.png" data-src="img/1.jpg" alt="Practical combat: Using Bootstrap to implement waterfall flow layout (with code)" >
                    </a>
                    <div>
                        <h4 id="标题-实战">标题 - 实战</h4>
                        <p>
                            <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</small>
                        </p>
                    </div> 
                </div>
            </div>
            <div>
                <div>
                    <a>
                        <img  class="img-responsive img-rounded lazy" src="/static/imghwm/default1.png" data-src="img/2.jpg" alt="Practical combat: Using Bootstrap to implement waterfall flow layout (with code)" >
                    </a>
                    <div>
                        <h4 id="标题-实战">标题 - 实战</h4>
                        <p>
                            <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</small>
                        </p>
                    </div> 
                </div>
            </div>
            <div>
                <div>
                    <a>
                        <img  class="img-responsive img-rounded lazy" src="/static/imghwm/default1.png" data-src="img/3.jpg" alt="Practical combat: Using Bootstrap to implement waterfall flow layout (with code)" >
                    </a>
                    <div>
                        <h4 id="标题-实战">标题 - 实战</h4>
                        <p>
                            <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</small>
                        </p>
                    </div> 
                </div>
            </div>
            <!--第四到第九个缩略图-->
            ...
            ...
            ...
            ...
            ...
            ...
            <!--图片结束-->
        </div>
    </div>
</section>

效果图：

Practical combat: Using Bootstrap to implement waterfall flow layout (with code)

3.2 实现瀑布流

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

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

给容器加了 column-width 这个样式时，浏览器会给你计算容器里面的 <div> 应该显示多少列，计算一个相对合理的布局方式。<p>首先我们给缩略图外部的容器加一个 <code>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; /*Safari and Chrome*/
    -moz-column-width:354px; /*Firefox*/
    -o-column-width:354px; /*Opera*/
    -ms-column-width:354px; /*IE*/
    column-width:354px;
}
#container>div{
    width:354px; /*宽度根据实际情况调节，应与上面一致*/
    overflow:auto; /*防止内容溢出导致布局错位*/
}

效果图：

Practical combat: Using Bootstrap to implement waterfall flow layout (with code)

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

<!--代码部分-->
body{
    body{
    font-family:"微软雅黑";
    --img-width:354px; /*两根连词线"--"加变量名"img-width"声明变量*/
}
#container{
    -webkit-column-width:var(--img-width); /*用"var(--变量名)"使用变量*/
    -moz-column-width:var(--img-width);
    -o-column-width:var(--img-width);
    -ms-column-width:var(--img-width);
    column-width:var(--img-width);
}
/*另：var()里面可以放第二个参数，在变量不存在时取第二个值，例如var(--img-width,200px)中，如果"--img-width"不存在则使用第二个参数"200px"*/
#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(&#39;container&#39;,&#39;col-md-4&#39;);
}

//加载瀑布流函数//思路来自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 = &#39;absolute&#39;;
            //距离顶部长度为这个缩略图上面那个缩略图的长度
            thumbnail[i].style.top = minHeight + &#39;px&#39;;
            //距离左边长度为这个缩略图上面那个缩略图距离左边的长度
            thumbnail[i].style.left = thumbnail[minIndex].offsetLeft + &#39;px&#39;;
            //更新最小高度
            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 的基本配置、栅格系统、缩略图、响应式图片和部分 CSS3 样式，其中栅格系统因为可以实现响应式布局尤其重要。

作者后除

原文地址：https://blog.mazey.net/2399.html

（完）

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

The above is the detailed content of Practical combat: Using Bootstrap to implement waterfall flow layout (with code). For more information, please follow other related articles on the PHP Chinese website!

Statement

This article is reproduced at:掘金社区. If there is any infringement, please contact admin@php.cn delete

Understanding the Bootstrap Grid System for Responsive Web DesignMay 14, 2025 am 12:07 AM

Bootstrap'sgridsystemiseffectiveduetoits12-columnlayoutandresponsiveclasses,allowingforflexibleandmaintainabledesigns.Toleverageit:1)Userowsandcolumnswithclasseslikecol-md,col-sm,andcol-lgfordifferentscreensizes.2)Simplifylayoutsbyavoidingexcessivene

Bootstrap Grid System: A Comprehensive Guide to Responsive LayoutsMay 13, 2025 pm 04:17 PM

BootstrapGridSystemisessentialforcreatingresponsivelayouts.1)Itusescontainers,rows,andcolumnsbasedona12-columnlayout.2)CSSflexboxandmediaqueriesensureflexibilityacrossscreensizes.3)Classeslikecol-xs,col-sm,col-md,andcol-lgcontrollayoutchanges.4)Avoid

Bootstrap: Applications and Advantages ExplainedMay 10, 2025 am 12:18 AM

Bootstrap is a front-end framework for quickly building responsive websites. Its advantages include: 1. Rapid development: leverage predefined styles and components. 2. Consistency: Provide a unified design style. 3. Responsive design: The built-in grid system is adapted to various devices. Bootstrap simplifies the web development process through CSS classes and JavaScript plug-ins.

Bootstrap: Simplifying Responsive Web DevelopmentMay 09, 2025 am 12:13 AM

Bootstrap simplifies the development process mainly through its raster system, predefined components and JavaScript plug-ins. 1. The grid system allows for flexible layout, 2. Predefined components such as buttons and navigation bars simplify style design, 3. JavaScript plug-in enhances interactive functions and improves development efficiency.

Bootstrap: The Key to Responsive Web DesignMay 08, 2025 am 12:24 AM

Bootstrap is an open source front-end framework developed by Twitter, providing rich CSS and JavaScript components, simplifying the construction of responsive websites. 1) Its grid system is based on a 12-column layout, and the display of elements under different screen sizes is controlled through class names. 2) The component library includes buttons, navigation bars, etc., which are easy to customize and use. 3) The working principle depends on CSS and JavaScript files, and you need to pay attention to handling dependencies and style conflicts. 4) The usage examples show basic and advanced usage, emphasizing the importance of custom functionality. 5) Common errors include grid system calculation errors and style coverage, which require debugging using developer tools. 6) Performance optimization recommendations only introduce necessary components and customize samples using preprocessors

Bootstrap: A Powerful Framework for Web DesignMay 07, 2025 am 12:05 AM

Bootstrap is an open source front-end framework developed by the Twitter team to simplify and speed up the web development process. 1.Bootstrap is based on HTML, CSS and JavaScript, and provides a wealth of components and tools for creating modern user interfaces. 2. Its core lies in responsive design, implementing various layouts and styles through predefined classes and components. 3.Bootstrap provides predefined UI components, such as navigation bars, buttons, forms, etc., which are easy to use and adjust. 4. Examples of usage include creating a simple navigation bar and advanced collapsible sidebar. 5. Common errors include version conflicts, CSS overwrites and JavaScript errors, which can be used through the version management tool.

The Power of Bootstrap in React: A Detailed LookMay 06, 2025 am 12:06 AM

Bootstrap can be integrated in React in two ways: 1) CSS and JavaScript files using Bootstrap; 2) Use the React-Bootstrap library. React-Bootstrap provides encapsulated React components, making using Bootstrap in React more natural and efficient.

Using Bootstrap Components in React: A Step-by-Step TutorialMay 05, 2025 am 12:09 AM

There are two ways to use Bootstrap components in React projects: 1) CSS and JavaScript of the original Bootstrap; 2) Use libraries designed specifically for React such as react-bootstrap or reactstrap. 1) Install Bootstrap through npm and introduce its CSS file in the entry file, and then use the Bootstrap class name in the React component. 2) After installing react-bootstrap or reactstrap, directly use the React components it provides. Use these methods to quickly build a responsive UI, but pay attention to style loading and JavaScript

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

How to fix KB5055612 fails to install in Windows 10?

4 weeks agoByDDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks agoByDDD

Nordhold: Fusion System, Explained

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Dreamweaver Mac version

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

WebStorm Mac version

Useful JavaScript development tools

Atom editor mac version download

The most popular open source editor

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software