Avalonjs: Making responsive waterfall stream special effect _ javascript skills

Waterfall streams are mainly used on the Image Display page. If a large number of images need to be displayed, the size of the original images is inconsistent, and each image is not cropped and displayed completely, a width must be specified for the image to free up its height. This feature makes full use of the page space to display as many images as possible. Next we will discuss in detail

The layout is neither based on float nor absolute positioning. You can see the bottom html and css. There are no annoying html inserts, and the code is refreshing.

Function getIndex (index) {if (index <10) {index = "00" + index;} else if (index <100) {index = "0" + index ;} return index;} var $ = function (id) {return document. getElementById (id) ;}; require (["aveon-min"], function (aveon) {var waterfall = {load_items: null, loaded_items: [], col_num: 0, // Number of columns waterfall_model: null, col_width: 200, loaded_num: 0, init_num: 0, loading: false, start: 0, resizing: false, find_shortest_col: function () {// find the column var a = aveon ($ ('row0') with the minimum height ')). height (), min_ I = 0; for (var I = 1; I <this. col_num; I ++) {var B = aveon ($ ('row' + I )). height (); if (B <a) {min_ I = I; a = B;} return min_ I;}, init: function (data) {this. load_items = data; this. loaded_items = this. loaded_items.concat (data); this. waterfall_model = waterfall_model; this. col_num = Math. floor (aveon (window ). width ()/this. col_width); this. init_num = this. col_num; for (var j = 0; j <this. col_num; j ++) {waterfall_model.img_list.push ([]);} for (var j = 0; j <this. col_num; j ++) {// var a = {};. src = getIndex (data [j]. src);. height = data [j]. height;. text = data [j]. text; waterfall_model.img_list [j]. push (a);} this. start = this. col_num;}, add_item: function (I) {var a = this. find_shortest_col (); var B ={}; var c = this. load_items [this. init_num + I]; if (c) {B. src = getIndex (c. src); B. height = c. height; B. text = c. text; waterfall_model.img_list [a]. push (B) ;}}, resize_item: function (I) {// console. log (I); var a = this. find_shortest_col (); var B ={}; var c = this. loaded_items [this. init_num + I]; if (c) {B. src = getIndex (c. src); B. height = c. height; B. text = c. text; waterfall_model.img_list [a]. push (B) ;}}; var waterfall_model = aveon. define ("waterfall", function (vm) {// vm. img_list = []; vm. rendered = function () {// execute if (waterfall. resizing) {if (waterfall. loaded_num + waterfall. init_num
 
  
= 199) {waterfall. col_num = Math. floor (aveon (window ). width ()/waterfall. col_width); waterfall_model.img_list = []; for (var j = 0; j <waterfall. col_num; j ++) {waterfall_model.img_list.push ([]);} waterfall. resizing = true; waterfall. loaded_num = waterfall. init_num = 0; // waterfall. start = 0; waterfall. resize_item (0) ;}}, 30 );});
 

Html

  
 
 
    
  
  
 
 {{el.src}} 
 
    
  
  
  
 
 

Css

#wrap ul li {display: inline-block;*display: inline;zoom: 1;vertical-align: top;font-size: 16px;}#wrap ul li p {margin: 5px 2.5px;border: 1px solid red;min-width: 192px;min-height: 100px;}#wrap span {display: block;}#waterFallDetect {width: 192px;height: 100px;border: 1px solid red;}

The above is all the content of this article. I hope you will like it.