Waterfall stream implementation with minimal code

Let's take a look:

 

The JS Code is first put up to show you the ideas. The specific implementation still requires CSS and HTML code. You can view my online source code and effects:

Full Screen, chrome, best browsing

Http://runjs.cn/detail/j9qlhajc

$ (Function () {$ ('# brand-waterfall '). waterfall () ;}); // waterfall stream plugin // pannysp 2013.4.9; (function ($) {$. FN. waterfall = function (options) {var df = {item :'. item', margin: 15, addfooter: true}; Options = $. extend (DF, options); return this. each (function () {var $ box = $ (this), Pos = [], _ box_width = $ box. width (), $ items = $ box. find (options. ITEM), _ owidth = $ items. eq (0 ). outerwidth () + options. margin, _ OHE Ight = $ items. eq (0 ). outerheight () + options. margin, _ num = math. floor (_ box_width/_ owidth); (function () {var I = 0; For (; I <_ num; I ++) {pos. push ([I * _ owidth, 0]) ;}} (); $ items. each (function () {VaR _ this = $ (this), _ temp = 0, _ Height = _ this. outerheight () + options. margin; _ this. hover (function () {_ this. addclass ('hover ');}, function () {_ this. removeclass ('hover ') ;}); For (var j = 0; j <_ num; J ++) {If (Pos [J] [1] <POS [_ temp] [1]) {// index _ temp = J ;}} this.style.css text = 'left: '+ POS [_ temp] [0] + 'px; top: '+ POS [_ temp] [1] + 'px;'; // after insertion, update the top value of the column POS [_ temp] [1] = POS [_ temp] [1] + _ height ;}); // assign the largest top value to the peripheral Div (function () {var I = 0, tops = []; for (; I <_ num; I ++) {tops. push (Pos [I] [1]);} tops. sort (function (a, B) {return a-B;}); $ box. height (TOPS [_ num-1]); // increase the tail fill Div if (OP Tions. addfooter) {addfooter (TOPS [_ num-1]) ;}} (); function addfooter (max) {var addfooter = document. createelement ('div '); addfooter. classname = 'item additem'; For (VAR I = 0; I <_ num; I ++) {If (max! = POS [I] [1]) {var clone = addfooter. clonenode (), _ Height = max-pos [I] [1]-Options. margin; clone.style.css text = 'left: '+ POS [I] [0] + 'px; top:' + POS [I] [1] + 'px; height: '+ _ height + 'px;'; $ box [0]. appendchild (clone) ;}}}) ;}} (jquery );