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

Editor to share with you how to achieve html5 waterfall flow layout, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's learn about it!

1. JS to realize waterfall flow

Train of thought analysis

The layout of waterfall flow is characterized by equal width but not equal height.

To minimize the gap in the last line, start with the second line, place the picture under the shortest picture in the first line, and so on.

The parent element is set to relative positioning, and the element of the picture is set to absolute positioning. Then locate each element by setting the top value and the left value.

Code implementation

.box {width: 100%; position:relative;} .item {position: absolute;} .item img {width: 100%; height:100%;}

Function waterFall () {/ 1 determine the width of the picture-scroll bar width var pageWidth = getClient (). Width-8; var columns = 3; / 3 columns var itemWidth = parseInt (pageWidth/columns); / / get the width of item $(".item") .width (itemWidth); / / set the width to item var arr = [] $(".box .item") .each (function (I) {var height = $(this). Find ("img") .height (); if (I)

< columns) { // 2 第一行按序布局 $(this).css({ top:0, left:(itemWidth) * i+20*i, }); //将行高push到数组 arr.push(height); } else { // 其他行 // 3 找到数组中最小高度 和 它的索引 var minHeight = arr[0]; var index = 0; for (var j = 0; j < arr.length; j++) { if (minHeight >

Arr [j]) {minHeight = arr [j]; index = j }} / / 4 sets the first box position / / top value of the next row to be the height of the smallest column $(this) .css ({top:arr [index] + 30) / / set the distance of 30 to left:$ (".box .item") .eq (index) .css ("left")}) / / 5 modify the height of the minimum column / / the height of the minimum column = current height + spliced height arr [index] = arr [index] + distance of height+30;// setting 30}}) } / / clientWidth processing compatibility function getClient () {return {width: window.innerWidth | | document.documentElement.clientWidth | | document.body.clientWidth, height: window.innerHeight | | document.documentElement.clientHeight | | document.body.clientHeight}} / / Real-time trigger _ window.onresize = function () {/ / redefine waterfall stream waterFall () when the page size changes }; / / initialize _ window.onload = function () {/ / implement waterfall flow waterFall ();}

2. Column multi-line layout to realize waterfall flow

Analysis of ideas:

The implementation of waterfall flow by column mainly depends on two properties.

One is the column-count property, which is divided into how many columns.

One is the column-gap property, which sets the distance between columns.

Code implementation:

.box {margin: 10px; column-count: 3; column-gap: 10px;} .item {margin-bottom: 10px;} .item img {width: 100%; height:100%;}

3. Flex elastic layout to realize waterfall flow

Analysis of ideas:

Flex implementation of waterfall flow requires that the outermost element be set to display: flex, that is, horizontal arrangement. Then wrap it by setting flex-flow:column wrap. Set the height at which the height: 100vh fills the screen to accommodate child elements. The width of each column can be set with the calc function, that is, width: calc (100% width 3-20px). Divide it into three equal-width columns and subtract the margin distance from left to right twice.

Code implementation:

.box {display: flex; flex-flow:column wrap; height: 100vh;} .item {margin: 10px; width: calc (100% width 3-20px);} .item img {width: 100%; height:100%;}

Comparison of four and three ways

If it's just a simple page presentation, you can use column multi-column layout and flex flexible layout. If you need to add data dynamically, or set the number of columns dynamically, you need to use JS + jQuery.

The above is all the content of the article "how to implement waterfall flow layout in html5". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.