23 lines of Jquery code to implement special effect on waterfall stream Layout

I have seen this Jquery special effect on the Internet. I can see that the code is very concise, and there are only 23 lines of Jquery Code implementing waterfall stream layout. I personally feel very good, later, I asked my original author sole if he could share the work on the JquerySchool website so that more users could learn it, after reading the reply today, I will immediately sort it out and share it with you...

 

The 23 lines of core Code are as follows:

Var cases = $ ("# case-list li"); var case_h = [[], [], [], []; var sum = [0, 0, 0]; $. each (cases, function (I) {var m = I % 4; var step = Math. floor (I/4); cases.eq(i2.16.css ("left", 220 * m + "px"); case_h [m]. push (cases. eq (I ). height (); if (! Step) {cases.eq(i2.16.css ("top", "0") ;}else {var num = 0; for (var n = 0; n <step; n ++) {num + = case_h [m] [n] + 20;} cases.eq(iyun.css ("top", num + "px") ;}}); $ (case_h ). each (function (I) {$ (case_h [I]). each (function (j) {sum [I] + = case_h [I] [j]; Aggregate aggregate into aggregate cases.parent().css ("height", sum. sort (function (a, B) {return a <B? A:-1}) [0] + 100 + "px ");

 

 

The effect is as follows:

 

Online Demo and download