Bootstrap practice - waterfall flow layout

There are many basic Bootstrap tutorials 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 styles 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 an HTML/CSS foundation.

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.

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 introduce compressed bootstrap.min.css in CSS folder in < head > tag.

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 bootstrap.min.js in the JS folder.

<!--BootstrapCSS File, put in<head>within-->
<link type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!--jQuery Files, importing BootstrapJS Must be imported before plug-in-->
<script language="javascript" type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<!--BootstrapJS File, usually at the bottom-->
<script language="javascript" type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--Give Way IE Using the latest rendering mode, support CSS3-->
<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
<!--If IE Version below IE9´╝îEnable browser support HTML5 and 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. With the increase of screen or viewport size, the system will automatically be 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. container or 100% width. container fluid style;
  • Line. row style, which must be contained in. container or. container fluid;
  • Column. col-md - * (* can be 1 to 12, which represents medium screen. According to this standard,. col-md-1 accounts for 1 / 12 of. row and. col-md-12 accounts for 12 / 12 of. row) or column offset. col-md-offset - * (* can be 1 to 12) are included in the. row container, so as to quickly carry out grid layout.

. col MD - * example:

<!--Code part-->
<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:

Use column offset. Col MD offset - * example:

<!--Code part-->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-1">1/12</div>
        <div class="col-md-1">1/12</div>
        <!--This is offset 4 to the right/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:

In addition, it should be noted that no matter how. Col MD - * and. Col MD offset - * are used together, the sum of * should not exceed 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 use method is to wrap the < img > tag in a container with. thumbnail style. If we want to add a text description, we can add a container with. caption style in it.

. thumbnail example:

<!--Code part-->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <div class="thumbnail">
                <img src="img/1.jpg">
                <div class="caption">
                    <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 class="col-md-4">
            <div class="thumbnail">
                <img src="img/1.jpg">
                <div class="caption">
                    <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 class="col-md-4">
            <div class="thumbnail">
                <img src="img/1.jpg">
                <div class="caption">
                    <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>

. thumbnail rendering:

2.4 responsive pictures

To fit the image to the size of the container, you can add an. Img responsive style to the image.

. img responsive example:

<img src="img/1.jpg" class="img-responsive" alt="Responsive picture">

In addition, you can add img rounded / img circle / img thumbnail to make the picture appear in the shape of fillet / circle / thumbnail.

Example of changing picture shape:

<!--Code part-->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <img src="img/1.jpg" class="img-responsive img-rounded" alt="fillet">
        </div>
        <div class="col-md-4">
            <img src="img/1.jpg" class="img-responsive img-circle" alt="circular">
        </div>
        <div class="col-md-4">
            <img src="img/1.jpg" class="img-responsive img-thumbnail" alt="thumbnail">
        </div>
    </div>
</div>

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 class="container-fluid">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
        <!--Put the picture here-->
        </div>
    </div>
</section>

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 picture in the thumbnail is decorated with the style of responsive picture. Img responsive and fillet style. Img rounded.

<!--Code part-->
<section class="container-fluid">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <!--Picture start-->
            <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>title - actual combat</h4>
                        <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 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>title - actual combat</h4>
                        <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 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>title - actual combat</h4>
                        <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:

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 ugly. Our waterfall flow is characterized by consistent width and highly adaptive layout. At present, consistent width has been realized. To achieve high adaptability, a style column width in CSS3 is used.

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

When the column width style is added to the container, the browser will calculate how many columns < div > in the container should be displayed, and calculate a relatively reasonable layout.

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

<!--Code part-->
<div class="row">
    <div class="col-md-10 col-md-offset-1" id="container">
        <!--Picture start-->
        <div class="col-md-4">
            <div class="thumbnail">

Then add the column width style to this id.

<!--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:

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

<!--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 a 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);
    //Gets an 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);
            //First row minimum height index
            var minIndex = thumbnailHeightArr.indexOf(minHeight);
            //Place this thumbnail below the minimum height of the upper row
            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 styles. Among them, grid system is particularly important because it can realize 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 hyperlink Post Division And the original address of this article: https://blog.mazey.net/2399.html

(end)

Tags: Front-end css3 html5 html bootstrap

Posted on Sun, 05 Dec 2021 17:14:18 -0500 by dale282