Mass framework waterfall (waterfall stream) plugin

The waterfall stream UI control of mass framework is much more powerful than the previous version.CodeIs practical.

Waterfall circulation is usually divided into three parts: Containers, barriers, and bricks. There is basically a big picture in the bricks. Originally, the waterfall stream attracted attention by pictures. Most waterfall streams on the Internet use absolute positioning to set the brick location. However, this is also dependent on backend support, make sure that the image size is given in advance, and then the front end needs to obtain the top and left of the waterfall through complicated calculation. If one day PM needs to implement the function of deleting a brick in real time, the amount of this re-arrangement will be large. As a result, my waterfall stream has the following advantages: Floating layout, very small dependence on the backend.

This control relies on my ejs template to convert the JSON data passed by the backend into HTML data, and then convert the HTML data into element nodes through the addtiles method.

Because the floating layout is used, you must add the well-known Clearfix clearing floating class on the waterfall container. The specific definition is as follows:

 
. Clearfix: After {content: ""; display: block; Height: 0; clear: Both; visibility: hidden;}. Clearfix {ZOOM: 1 ;}
 

Parameters:

Settings

Optional. Used to configure control objects. But when this object calls it for the second time,
It is valid only when the first parameter is a string or object, which is equivalent to calling its method or rewriting some attributes.

Return Value:

Mass instance

Settings configuration parameters:

• Img_expr:RequiredThe CSS expression of the big image in the brick, which is used to add the next brick after it is loaded.
• Col:RequiredThe total number of columns in the waterfall stream (fence ).
• Col_width:Required, The Barrier width. Note that the value must be greater than that of the brick.
• Ejs_id:RequiredThe id value of the brick template.
• Callback: the callback triggered after all bricks are added. This points to the UI instance.
• Width: the width of the container. If no specification is specified, ui.tar get. Width () is taken as its value.
• Interval: the waterfall stream binds a scroll event on the window, which is the number of milliseconds that the scroll wheel triggers a callback. The default value is 20.
• Fade: whether to use the fade-in effect. If it is added, the transparent value is set to zero, and then in the scroll event, when the scroll bar is dragged to the position of the brick, the animation begins to fade. The default value is false.
• Fade_time: Specifies the animation duration. The default value is 500.

The generated waterfall stream has the following methods: $ (expr ). waterfall (method, args1, args2, args3) is called, or the instance is obtained through waterfall ("getui") and then called.

• Addtiles (JSON): Add a group of bricks. JSON is an array of objects.
• Addtile (HTML, htmls, index) to add bricks. HTML is the first element in htmls. html is the preceding JSON array converted into a String Array Using an ejs template. Index indicates the number of columns to be added.
• Getshortestcolumn (): This method is usually called internally by addtile to obtain the index value of the shortest bar to facilitate the addition of new bricks.
• Scroll (callback): bind the scroll event to the window. If fade is true, perform this method even if no parameter is passed.
  Callback is triggered multiple times during scrolling. Parameters for passing parameters are not the same. One case is that when a brick appears at the position of the drag block of the scroll bar, the passing parameter is El (brick, a mass instance ).
  In another case, it is used to determine whether the scroll bar is close to the bottom of the page (you can use ajax to load the next batch of data). The Transmitted parameter data is rollheight (the rolled distance) and pageheight (the page height)
• Destory (): destroys an instance and removes dynamically added nodes.

The generated UI instance has the following attributes.

• Parent: $ (expr ).
• Target: Same as above.
• Cols: a set of dynamically generated columns, an object array, which contains the mass instance of the barrier.
• Tiles: a set of dynamically generated bricks. An array of objects contains mass instances of bricks (For details, refer to the ejs template)

Example

# Waterfall {width: 1100px; Background: URL ("http://images.cnblogs.com/cnblogs_com/rubylouvre/363259/o_waterfall_bc.jpg") Repeat scroll 0 0 transparent ;}. clearfix: After {content: ""; display: block; Height: 0; clear: Both; visibility: hidden ;}. clearfix {ZOOM: 1 ;}. tile {width: 198px; padding: 20px; margin-top: 10px; Border: 1px solid #000;-moz-box-Shadow: 2px 2px 10px # c96; -WebKit-box-Shadow: 2px 2px 10px # c96; box-Shadow: 2px 2px 10px # c96; Background: # FFF ;}. tile. dis {width: 198px ;}. footer {Height: 24px; line-Height: 24px; Background: Gray ;}

  
   
  
 
   
  
 
   
  

   
     This is the footer 
   
  
 

$. Require ("Ready, more/Waterfall", function () {var waterfall = $ ("# Waterfall "). waterfall ({ejs_id: "tile_tmpl", width: 1100, Col: 4, img_expr :". big_img ", col_width: 246, fade: True, callback: function () {If (! This. _ First) {// the first brick does not need to be transparent var tiles = This. tiles. splice (0, 5); For (VAR I = 0, El; El = tiles [I ++];) {el.css ("O", 1)} This. _ first = true ;}}}). waterfall ("getui"); waterfall. addtiles (data. splice (0, 10) waterfall. scroll (function (rollheight, pageheight) {If (typeof rollheight = "Number") {$. log (rollheight + "" + pageheight); If (rollheight + 30 >$ (". footer "). offset (). top) {waterfall. addtiles (data. splice ));}}})})

This is the footer.