How to realize the effect of picture waterfall flow by jQuery
Most people do not understand the knowledge points of this article "jQuery how to achieve picture waterfall flow effect", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "jQuery how to achieve picture waterfall flow effect" article.
Note: this article is based on knowing the actual size of each picture
Features: adaptive number of columns, fixed picture width
Known BUG:
As in this case, there will be a problem when just five pictures are displayed in a loop and there are only five columns. The solution is to give the style out of order, but to put the picture in the column with the lowest top value first.
1. ready
1. Basic html
Create a new html file, and then copy the code of the next layer of # main several times. After all, many pictures can reflect the function of waterfall flow.
two。 Basic css
# main {width: 90%; background-color: # dab; text-align: center; margin:0 auto; position: relative;} img {width: 100%; box-sizing:border-box; box-shadow: 2px 0 3px # ddd,0 2px 3px # ddd;}. Img-item {position: absolute; padding: 3px; box-sizing:border-box; height: auto; display: inline-block;}
two。 Start
1. Statement
/ / get picture list package layer var $main = $('# main'); / / get window for adaptive var $mainWidth = $(window) .width (); / / define picture width var imgWidth = 150 Math.floor / number of columns that can be displayed var columnNumber = Math.floor ($mainWidth/imgWidth); / / store top information var data = []; / / initialize, for example, if 6 columns can be displayed, initialize 6 spatial for (var I = 0; I < columnNumber) here ITunes +) {data [I] = 0;}
two。 Main body
/ / var wall = function () {/ / get album picture collection var $imgs = $('.img-item'); / / traverse the picture collection to modify the top value $.each ($imgs, function (index, el) {/ / calculate the current number of columns var currColumn = index% columnNumber; / / get the height to be displayed var size = $(' img', el) .data ('size') Var height = imgWidth / parseInt (size.split ('*') [0]) * parseInt (size.split ('*') [1]) $(el). Css ({width: imgWidth, left: currColumn * imgWidth, top: data [currColumn]}); / / if you need animation, you can use $(el). Animate data [currColumn] + = height / / originally, you only need + = $(el) .height () to solve it, but there are some unsolved problems during initialization};}
3. Form resizing event
$(window) .resize (function (event) {/ / reset window width $mainWidth = $(window). Width (); / reset the number of columns that can be displayed columnNumber = Math.floor ($mainWidth / imgWidth); / / dynamically modify the width of the wrapping layer of # main albums to make the entire album look centered all the time $main.css ({width: imgWidth * columnNumber}); / / reset top information for (var I = 0; I < columnNumber) ITunes +) {data [I] = 0;} wall ();}); above is the content of this article on "how to achieve the waterfall effect of pictures in jQuery". I believe you all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to learn more about the relevant knowledge, please follow the industry information channel.
