Bootstrap actual combat-waterfall flow layout

There are a lot of tutorials on the basics of Bootstrap on the Internet. In fact, the documents on Bootstrap Chinese website (bootcss.com) have been written in detail, but there are not many actual cases. Here are some current popular web page layouts as the guide, using Bootstrap styles to complete it. Each time I only talk about the knowledge points related to the case, learn while practicing, and strengthen understanding. HTML/CSS foundation is required to practice this case.

1. Case introduction

Waterfall is a web page layout that has become popular in recent years. Its visual performance is a jagged multi-column layout. In this case, Bootstrap is used to implement a waterfall layout.

瀑布流布局效果图

2. Related Bootstrap knowledge points

2.1 Configure Bootstrap

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

2.1.2 `<head>` introduced CSS file folder labels within the compressed `bootstrap.min.css` .

2.1.3 Because Bootstrap's JS plug-in relies on jQuery, so if you want to use his JS plug-in, you must first import jQuery, and then import `bootstrap.min.js` under 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" 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 Grid System

Official explanation: Bootstrap provides a responsive, mobile device-first streaming grid system. As the size of the screen or viewport increases, the system will automatically be divided into up to 12 columns. It contains predefined classes that are easy to use.

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

The fixed width .container or 100% width .container-fluid style of the outer layer;
Line .row style, must be included in .container or .container-fluid ;
Column .col-md-* ( * may be from 1 to 12, represented here this standard display medium screen, .col-md-1 accounting .row of 1/12, .col-md-12 accounting .row 12/12) or column offset .col-md-offset-* ( * may be 1 to 12), Contained in the .row container, so as to quickly carry out the grid layout.

.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-* renderings:

效果图

Example using column offset .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-* renderings:

效果图

In addition, it should be noted that no matter .col-md-* and .col-md-offset-* used together, ensure that the * does not exceed 12, otherwise line breaks will occur.

2.3 Thumbnail

Thumbnails most often appear on product display pages, and the most common ones are product displays on some shopping websites.

Thumbnails need to be used with the grid system described above. The method of use is to <img> label in .thumbnail . If we want to add a text description, we can add a container with the .caption

.thumbnail example:

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

.thumbnail renderings:

效果图

2.4 Responsive images

In order to adapt the picture to the size of the container, you can add the .img-responsive style to the picture.

.img-responsive example:

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

You can also add img-rounded / img-circle / img-thumbnail make the picture appear rounded/circular/thumbnail shape.

Examples of changing the shape of a picture:

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

Change the shape of the picture:

改变图片形状效果图

Third, the actual layout of the waterfall flow

3.1 Arrange pictures

After reading the above content, the actual combat will begin below. First, use a grid structure to build an area to put the picture, here we leave 1/12 of the space on the left and right sides.

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

Effect picture:

效果图

Then use the thumbnail style with description as seen above, each thumbnail occupies 4/12 of the middle 10/12 (as a whole), with three thumbnails in each row and three rows. The picture in the thumbnail is modified .img-responsive and the rounded corner style .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">
                        <h4>标题 - 实战</h4>
                        <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">
                        <h4>标题 - 实战</h4>
                        <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">
                        <h4>标题 - 实战</h4>
                        <p>
                            <small>阅读是运用语言文字来获取信息，认识世界，发展思维，并获得审美体验的活动。它是从视觉材料中获取信息的过程。视觉材料主要是文字和图片，也包括符号、公式、图表等。</small>
                        </p>
                    </div> 
                </div>
            </div>
            <!--第四到第九个缩略图-->
            ...
            ...
            ...
            ...
            ...
            ...
            <!--图片结束-->
        </div>
    </div>
</section>

Effect picture:

效果图

3.2 Realize waterfall flow

So far, the pictures have been arranged, but they look weird, because there is a gap between the upper and lower pictures, which looks very unsightly. The characteristics of our waterfall flow are the same width and height adaptive layout. At present, the same width has been achieved. To achieve height adaptation, a style column-width CSS3 is used.

Official explanation: To set or retrieve the width of each column of the object, the corresponding script feature is columnWidth.

When you add the column-width to the container, the browser will calculate how many columns should be displayed in the <div>

First, we add a id="container" the container outside the thumbnail.

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

Then add column-width to this id .

<!--代码部分-->
#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; /*防止内容溢出导致布局错位*/
}

Effect picture:

效果图

Because now mainstream browsers (Chrome/Firefox/Opera/Safari) already support CSS variables, in order to facilitate debugging and maintenance, the above CSS code can also be written like this.

<!--代码部分-->
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;
}

At this point, our Bootstrap waterfall flow layout is complete. It is very simple to complete step by step. The demo address: https://mazey.cn/bootstrap-blueprints/lesson-first-waterfall/index.html , the source code address : https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-first-waterfall .

3.3 Expansion

In addition to using CSS3 to achieve waterfall flow, you can also use JavaScript to achieve this effect. The reference code is as follows.

//页面加载完之后再加载瀑布流
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;
        }
    }
}

One of the most obvious benefits of using JavaScript to achieve waterfall flow is that it has better compatibility with IE. Because Windows7 is bundled with IE browser, the group of domestic IE users is very large, which makes us have to consider IE browsing when making web pages. Compatibility issues with the device.

JavaScript implementation of waterfall flow reference source address: https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-first-waterfall-javascript .

Four, summary

This article introduces Bootstrap's basic configuration, grid system, thumbnails, responsive pictures and some CSS3 styles. grid system especially important because it can achieve responsive layout.

copyright notice

All original articles in this blog, the author reserves the copyright. Reprints must include this statement, keep this article complete, and indicate the author in the form of a hyperlink, except for and the original address of this article: https://blog.mazey.net/2399.html

(over)

Bootstrap actual combat-waterfall flow layout

1. Case introduction

2. Related Bootstrap knowledge points

2.1 Configure Bootstrap

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

2.1.2 `<head>` introduced CSS file folder labels within the compressed `bootstrap.min.css` .

2.1.3 Because Bootstrap's JS plug-in relies on jQuery, so if you want to use his JS plug-in, you must first import jQuery, and then import `bootstrap.min.js` under the JS folder.

2.2 Grid System

2.3 Thumbnail

2.4 Responsive images

Third, the actual layout of the waterfall flow

3.1 Arrange pictures

3.2 Realize waterfall flow

3.3 Expansion

Four, summary

后除除

引用和评论

Git 版本控制：构建高效协作和开发流程的最佳实践

网页设计的垂直居中

CSS团队协作规范

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

开发插件集合

Bootstrap actual combat-waterfall flow layout

1. Case introduction

2. Related Bootstrap knowledge points

2.1 Configure Bootstrap

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

2.1.2 <head> introduced CSS file folder labels within the compressed bootstrap.min.css .

2.1.3 Because Bootstrap's JS plug-in relies on jQuery, so if you want to use his JS plug-in, you must first import jQuery, and then import bootstrap.min.js under the JS folder.

2.2 Grid System

2.3 Thumbnail

2.4 Responsive images

Third, the actual layout of the waterfall flow

3.1 Arrange pictures

3.2 Realize waterfall flow

3.3 Expansion

Four, summary

后除除

引用和评论

Git 版本控制：构建高效协作和开发流程的最佳实践

网页设计的垂直居中

CSS团队协作规范

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

开发插件集合

2.1.2 `<head>` introduced CSS file folder labels within the compressed `bootstrap.min.css` .

2.1.3 Because Bootstrap's JS plug-in relies on jQuery, so if you want to use his JS plug-in, you must first import jQuery, and then import `bootstrap.min.js` under the JS folder.