Bootstrap actual combat – waterfall flow layout

Time:2022-5-18

There are a lot of tutorials on the basis of bootstrap on the Internet. In fact, the documents in bootstrap Chinese network (bootcss. Com) have been written in great detail, but there are few practical cases. Here we use some popular web page layout as the guide, and use the style in bootstrap to complete it. Each time, only talk about the knowledge points related to the case, learn while practicing, and strengthen understanding. To practice this case, you need to have a basic HTML / CSS.

1、 Case introduction

Waterfall flow is a popular web page layout in recent years. Its visual performance is uneven multi column layout. This case uses bootstrap to realize a waterfall flow layout.

Bootstrap actual combat - waterfall flow layout

Waterfall flow layout renderings

2、 Relevant bootstrap knowledge points

2.1 configuring bootstrap

2.1.1 first go to the bootstrap official website(bootcss.com)Download “bootstrap for production environment”.

2.1.2 in<head>The compressed in the CSS folder is introduced into the tagbootstrap.min.css

2.1.3 because the JS plug-in of bootstrap relies on jQuery, if you want to use its JS plug-in, you must first import jQuery, and then import the JS under the JS folderbootstrap.min.js

<!-- Bootstrap CSS file, placed in < head > -- >
<link type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- JQuery file, which must be imported before bootstrap JS plug-in -- >
<script language="javascript" type="text/javascript" src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<!-- Bootstrap JS files are usually placed at the bottom -- >
<script language="javascript" type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Let ie use the latest rendering mode and support CSS3 -- >
<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
<!-- If the IE version is lower than IE9, make the browser support HTML5 and CSS3 -- >
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://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. With the increase of screen or viewport size, the system will be automatically divided into up to 12 columns. It contains predefined classes that are easy to use.

In short, bootstrap has written three types of styles from outside to inside for fast layout:

  • Fixed width of outer layer.containerOr 100% width.container-fluidStyle;
  • that ‘s ok.rowStyle, must be included in.containeror.container-fluidMedium;
  • column.col-md-**It can be 1 to 12, which represents medium screen. The screen is displayed according to this standard,.col-md-1occupy.row1 / 12 of,.col-md-12occupy.row12 / 12) or column offset.col-md-offset-**Can be 1 to 12), included in.rowContainer, so that grid layout can be carried out quickly.

.col-md-*Example:

<!-- Code part -- >
<div>
    <div>
        <div>1/12</div>
        <div>1/12</div>
        <div>1/12</div>
        <div>1/12</div>
        <div>1/12</div>
        <div>1/12</div>
        <div>1/12</div>
        <div>1/12</div>
        <div>1/12</div>
        <div>1/12</div>
        <div>1/12</div>
        <div>1/12</div>
    </div>
    <div>
        <div>1/12</div>
        <div>3/12</div>
        <div>4/12</div>
        <div>4/12</div>
    </div>
    <div>
        <div>6/12</div>
        <div>6/12</div>
    </div>
</div>

.col-md-*design sketch:

Bootstrap actual combat - waterfall flow layout

design sketch

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

<!-- Code part -- >
<div>
    <div>
        <div>1/12</div>
        <div>1/12</div>
        <!-- Offset right here 4 / 12 -- >
        <div>1/12</div>
        <div>1/12</div>
        <div>1/12</div>
        <div>1/12</div>
        <div>1/12</div>
        <div>1/12</div>
    </div>
    <div>
        <div>3/12</div>
        <div>4/12</div>
    </div>
    <div>
        <div>6/12</div>
    </div>
</div>

.col-md-offset-*design sketch:

Bootstrap actual combat - waterfall flow layout

design sketch

Another thing to note is that regardless of.col-md-*and.col-md-offset-*How to match and use should be guaranteed*The total is no more than 12, otherwise line breaking will occur.

2.3 thumbnails

Thumbnails most often appear on the product display page, such as the product display of some shopping websites.

Thumbnails need to be used in conjunction with the grid system described above. The method of use is to<img>Label wrapped in tape.thumbnailIn the style container, if we want to add a text description, we can add a style as.captionContainer for.

.thumbnailExample:

<!-- Code part -- >
<div>
    <div>
        <div>
            <div>
                <img src="img/1.jpg">
                <div>
                    < H4 > title - thumbnail < / H4 >
                    < small > I am the description in the thumbnail, I am the description in the thumbnail, I am the description in the thumbnail, I am the description in the thumbnail, I am the description in the thumbnail</ small>
                </div>
            </div>
        </div>
        <div>
            <div>
                <img src="img/1.jpg">
                <div>
                    < H4 > title - thumbnail < / H4 >
                    < small > I am the description in the thumbnail, I am the description in the thumbnail, I am the description in the thumbnail, I am the description in the thumbnail, I am the description in the thumbnail</ small>
                </div>
            </div>
        </div>
        <div>
            <div>
                <img src="img/1.jpg">
                <div>
                    < H4 > title - thumbnail < / H4 >
                    < small > I am the description in the thumbnail, I am the description in the thumbnail, I am the description in the thumbnail, I am the description in the thumbnail, I am the description in the thumbnail</ small>
                </div>
            </div>
        </div>
    </div>
</div>

.thumbnaildesign sketch:

Bootstrap actual combat - waterfall flow layout

design sketch

2.4 responsive pictures

To fit the picture to the size of the container, you can add.img-responsiveStyle.

.img-responsiveExample:

<img src="img/1.jpg">

You can also addimg-rounded/img-circle/img-thumbnailMake the picture appear rounded / round / thumbnail shape.

Example of changing picture shape:

<!-- Code part -- >
<div>
    <div>
        <div>
            <img src="img/1.jpg">
        </div>
        <div>
            <img src="img/1.jpg">
        </div>
        <div>
            <img src="img/1.jpg">
        </div>
    </div>
</div>

Effect drawing of changing picture shape:

Bootstrap actual combat - waterfall flow layout

Effect drawing of changing picture shape

3、 Waterfall layout practice

3.1 arrange pictures

After reading the above content, we will start the actual combat. First, use the grid structure to build an area for putting pictures. Here, we leave 1 / 12 blank on the left and right.

<!-- Code part -- >
<section>
    <div>
        <div>
        <!-- Put pictures here -- >
        </div>
    </div>
</section>

design sketch:

Bootstrap actual combat - waterfall flow layout

design sketch

Then use the thumbnail style with description seen above. Each thumbnail accounts for 4 / 12 of the middle 10 / 12 (as a whole). Put three thumbnails and three lines in each line. The pictures in the thumbnail are in the style of responsive pictures.img-responsiveAnd fillet styles.img-roundedDecorate it.

<!-- Code part -- >
<section>
    <div>
        <div>
            <!-- Picture start -- >
            <div>
                <div>
                    <a href="javascript:void(0);">
                        <img src="img/1.jpg">
                    </a>
                    <div>
                        < H4 - actual combat title
                        <p>
                            < small > reading is an activity that uses language to obtain information, understand the world, develop thinking and obtain aesthetic experience. It is the process of obtaining information from visual materials. Visual materials mainly include words and pictures, as well as symbols, formulas, charts, etc</ small>
                        </p>
                    </div> 
                </div>
            </div>
            <div>
                <div>
                    <a href="javascript:void(0);">
                        <img src="img/2.jpg">
                    </a>
                    <div>
                        < H4 - actual combat title
                        <p>
                            < small > reading is an activity that uses language to obtain information, understand the world, develop thinking and obtain aesthetic experience. It is the process of obtaining information from visual materials. Visual materials mainly include words and pictures, as well as symbols, formulas, charts, etc</ small>
                        </p>
                    </div> 
                </div>
            </div>
            <div>
                <div>
                    <a href="javascript:void(0);">
                        <img src="img/3.jpg">
                    </a>
                    <div>
                        < H4 - actual combat title
                        <p>
                            < small > reading is an activity that uses language to obtain information, understand the world, develop thinking and obtain aesthetic experience. It is the process of obtaining information from visual materials. Visual materials mainly include words and pictures, as well as symbols, formulas, charts, etc</ small>
                        </p>
                    </div> 
                </div>
            </div>
            <!-- Fourth to ninth thumbnails -- >
            ...
            ...
            ...
            ...
            ...
            ...
            <!-- End of picture -- >
        </div>
    </div>
</section>

design sketch:

Bootstrap actual combat - waterfall flow layout

design sketch

3.2 realize waterfall flow

The pictures have been arranged here, but it looks strange, because there is a gap between the upper and lower pictures, which looks very unsightly. Our waterfall flow is characterized by consistent width and highly adaptive layout. At present, we have achieved consistent width. To achieve high adaptability, we need to use a style in CSS3column-width

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

Fill the container withcolumn-widthIn this style, the browser will give you the information in the container<div>How many columns should be displayed and calculate a relatively reasonable layout.

First, we add a container outside the thumbnailid="container"

<!-- Code part -- >
<div>
    <div>
        <!-- Picture start -- >
        <div>
            <div>

Then for thisidaddcolumn-widthStyle.

<!-- Code part -- >
#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; /* The width shall be adjusted according to the actual situation and shall be consistent with the above*/
    overflow:auto; /* Prevent layout dislocation caused by content overflow*/
}

design sketch:

Bootstrap actual combat - waterfall flow layout

design sketch

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

<!-- Code part -- >
body{
    body{
    Font family: "Microsoft YaHei";
    --img-width:354px; /* Two conjunctions "--" plus variable name "img width" declare variables*/
}
#container{
    -webkit-column-width:var(--img-width); /* Use "var (- - variable name)" to use variables*/
    -moz-column-width:var(--img-width);
    -o-column-width:var(--img-width);
    -ms-column-width:var(--img-width);
    column-width:var(--img-width);
}
/*In addition, the second parameter can be placed in VaR (). When the variable does not exist, the second value is taken. For example, in VaR (- - img width, 200px), if "-- img width" does not exist, the second parameter "200px" is used*/
#container>div{
    width:var(--img-width);
    overflow:auto;
}

Here, our bootstrap waterfall flow layout is completed. It is still very simple to complete step by step. Demonstration address:https://mazey.cn/bootstrap-blueprints/lesson-first-waterfall/index.html, source code address:https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-first-waterfall

3.3 extension

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

//Load the waterfall flow after the page is loaded
window.onload = function(){
    //Col-md-4 is quoted here because wrapping pictures in the box has no other function. If you don't want to conflict, you can also create other classes
    loadWaterfall('container','col-md-4');
}

//Load the waterfall stream function. // the idea comes from Miss Amy
function loadWaterfall(boxID,thumbnailClass){
    //Get the box outside the thumbnail
    var box = document.getElementById(boxID);
    //Get the array of thumbnails
    var thumbnail = box.getElementsByClassName(thumbnailClass);
    //Gets the width of each thumbnail
    var thumbnailWidth = thumbnail[0].offsetWidth;
    //How many thumbnails can be arranged in each row of the calculation box
    var colCount = Math.floor((document.documentElement.clientWidth*(10/12))/thumbnailWidth);
    //Create an array of heights to be sorted each time
    var thumbnailHeightArr = [];
    for(var i = 0; i < thumbnail.length; i++){
        //Gets the first row height array
        if(i < colCount){
            thumbnailHeightArr.push(thumbnail[i].offsetHeight);
        }else{
            //Get previous minimum height
            var minHeight = Math.min.apply(null,thumbnailHeightArr);
            //Minimum height index of the first row
            var minIndex = thumbnailHeightArr.indexOf(minHeight);
            //Place this thumbnail below the minimum height of the line above
            thumbnail[i].style.position = 'absolute';
            //The length from the top is the length of the thumbnail above this thumbnail
            thumbnail[i].style.top = minHeight + 'px';
            //The length from the left is the length from the left of the thumbnail above this thumbnail
            thumbnail[i].style.left = thumbnail[minIndex].offsetLeft + 'px';
            //Update minimum height
            thumbnailHeightArr[minIndex] += thumbnail[i].offsetHeight;
        }
    }
}

One of the most obvious advantages of implementing waterfall flow with JavaScript is that it has better compatibility with ie. because of the bundled installation of IE browser in Windows 7, there are a large number of people using IE in China, which makes us have to consider the compatibility of IE browser when making web pages.

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

4、 Summary

This paper introduces the basic configuration of bootstrap, grid system, thumbnails, responsive pictures and some CSS3 stylesgrid system Because it is particularly important to achieve responsive layout.

Copyright notice

All original articles of this blog are copyrighted by the author. Reprint must include this statement, keep this article complete, and indicate the author in the form of hyperlinkPost DivisionAnd the original address of this article:https://blog.mazey.net/2399.html

(end)