Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to use Bootstrap to achieve waterfall flow layout. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

I. case introduction

Waterfall flow is a popular web page layout in recent years, the visual performance is uneven multi-column layout, this case is to use Bootstrap to achieve a waterfall flow layout.

Second, the related Bootstrap knowledge point 2.1 configure Bootstrap2.1.1 first go to the Bootstrap official website (bootcss.com) to download "Bootstrap for production environment". 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 is dependent on jQuery, if you want to use its JS plug-in, you must first introduce jQuery, and then introduce bootstrap.min.js under the JS folder. 2.2 Grid system

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

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

The outer layer has a fixed width. container or 100% width. container-fluid style

Row style, which must be included in .container or .container-fluid

Column .col-md-* (* can be 1 to 12, here represents medium screen display according to this standard, .col-md-1 accounts for .row 's 1x12. Colmurmdmur12 accounts for .row 's 12) or column offset .col-md-offset-* (* can be 1 to 12), which is included in the .row container for fast grid layout.

.col-md-* example:

1/12 1/12 1/12 3/12 4/12 4/12 6/12 6/12

.col-md-* effect drawing:

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

1/12 1/12 1/12 3/12 4/12 6/12

.col-md-offset-* effect drawing:

It is also important to note that no matter how .col-md-* and .col-md-offset-* are used together, make sure that the sum of * is not more than 12, otherwise line breaks will occur.

2.3 Thumbnail

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

Thumbnails need to be used in conjunction with the grid system described above, by using the

The tag package is in a container with a .thumbnail style. If we want to add a text description, we can add a container with the style .caption to it.

.thumbnail example:

Title-Thumbnail I am the description in the thumbnail, I am the description in the thumbnail.

Title-Thumbnail I am the description in the thumbnail, I am the description in the thumbnail.

Title-Thumbnail I am the description in the thumbnail, I am the description in the thumbnail.

.thumbnail effect image:

2.4 responsive pictures

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

.img-responsive example:

You can also add img-rounded/img-circle/img-thumbnail to give the picture the shape of a fillet / circle / thumbnail.

Example of changing the shape of a picture:

Change the shape of the picture, effect picture:

Third, waterfall flow layout practice 3.1 arrange pictures

After reading the above, the actual combat began below. First of all, use the grid structure to build an area where the picture is placed, where we leave a white space of 12 on the left and right.

Effect picture:

Then, using the described thumbnail style seen above, each thumbnail accounts for 4 thumbnails of the middle 10 thumb 12 (as a whole), with three thumbnails per line and three lines. The picture in the thumbnail uses the responsive picture style. img-responsive and fillet style. embellished with img-rounded.

Title-actual combat

Reading is an activity that uses spoken and written words to obtain information, understand the world, develop thinking, and gain aesthetic experience. It is the process of obtaining information from visual materials. Visual materials are mainly words and pictures, including symbols, formulas, charts and so on.

Title-actual combat

Reading is an activity that uses spoken and written words to obtain information, understand the world, develop thinking, and gain aesthetic experience. It is the process of obtaining information from visual materials. Visual materials are mainly words and pictures, including symbols, formulas, charts and so on.

Title-actual combat

Reading is an activity that uses spoken and written words to obtain information, understand the world, develop thinking, and gain aesthetic experience. It is the process of obtaining information from visual materials. Visual materials are mainly words and pictures, including symbols, formulas, charts and so on.

......

Effect picture:

3.2 implement waterfall flow

The pictures have been arranged so far, but it looks strange, because there is a gap between the upper and lower pictures, which looks very unsight. our waterfall flow is characterized by uniform width and highly adaptive layout. Width consistency has been achieved, and a style column-width in CSS3 is used to achieve a high degree of adaptation.

Official explanation: sets or retrieves the width of each column of the object, and the corresponding script property is columnWidth.

When you add the column-width style to the container, the browser will calculate how many columns should be displayed in the container and calculate a relatively reasonable layout.

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

Then add the column-width style to the id.

# container {- webkit-column-width:354px; / * Safari and Chrome*/-moz-column-width:354px; / * Firefox*/-Omurley widget 354px; / * Opera*/-ms-column-width:354px; / * IE*/ column-width:354px;} # container > div {width:354px; / * width should be adjusted according to the actual situation and should be the same as above * / overflow:auto / * prevent content overflow from causing layout dislocation * /}

Effect picture:

Because mainstream browsers (Chrome/Firefox/Opera/Safari) now support CSS variables, the above CSS code can also be written for ease of debugging and maintenance.

Body {body {font-family: "Microsoft Yahei";-- img-width:354px; / * two hyphenation lines "- -" add variable name "img-width" to declare variable * /} # container {- webkit-column-width:var (--img-width); / * use variable * /-moz-column-width:var (--img-width) with "var (--variable name)" -o-column-width:var (--img-width);-ms-column-width:var (--img-width); column-width:var (--img-width) } / * another: you can put the second parameter in var (), and take the second value if the variable does not exist. For example, in var (--img-width,200px), if "--img-width" does not exist, use the second parameter "200px" * / # container > div {width:var (--img-width); overflow:auto;}

At this point, the layout of our Bootstrap waterfall flow is complete, and it is very simple to complete it step by step.

3.3 expansion

In addition to implementing the waterfall flow with CSS3, you can also use JavaScript to achieve this effect, as shown in the following reference code.

/ / load the waterfall stream _ window.onload = function () {/ / the col-md-4 is referenced here because wrapping the image in the box has no other function. If you don't want to conflict, you can create another Class loadWaterfall ('container','col-md-4'). } / / load the waterfall stream function / / ideas from Amy teacher function loadWaterfall (boxID,thumbnailClass) {/ / get the box outside the thumbnail var box = document.getElementById (boxID); / / get the array var thumbnail = box.getElementsByClassName (thumbnailClass) of the thumbnail; / / get the width of each thumbnail var thumbnailWidth = thumbnail [0] .offsetWidth / / calculate how many thumbnails can be arranged in each row in the box var colCount = Math.floor ((document.documentElement.clientWidth* (10 + 12)) / thumbnailWidth); / / create a height array var thumbnailHeightArr = []; for (var I = 0; I < thumbnail.length) I height +) {/ / get the first row height array if (I < colCount) {thumbnailHeightArr.push (thumbnail [I] .offsetHeight);} else {/ / get the previous minimum height var minHeight = Math.min.apply (null,thumbnailHeightArr); / / the first row minimum height index var minIndex = thumbnailHeightArr.indexOf (minHeight) / / place this thumbnail below the minimum height of the row above thumbnail.style.position = 'absolute'; / / the top length of the thumbnail above this thumbnail is thumbnail.style.top = minHeight +' px'. The length on the left is thumbnail.style.left = thumbnail.offsetLeft + 'px'; / / update minimum height thumbnailHeightArr [minIndex] + = thumbnail.offsetHeight;}}

One of the most obvious advantages of implementing waterfall flow with JavaScript is that it is more compatible with IE. Because Windows7 is bundled with IE browsers, there are a large number of domestic users of IE, which makes us have to consider the compatibility of IE browsers when making web pages.

This is the end of this article on "how to use Bootstrap to achieve waterfall flow layout". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.