Chinese front-end UI framework kit (14th) Cool waterfall stream special effect Animation

 

Demo address: http://xueduany.github.com/KitJs/KitJs/index.html#waterfall

 

(1) features of the kitjs waterfall stream component

1. the waterfall stream displays the image loading, and the mouse scrolls to the end to load new data.

2. The number of falls varies with the size of the window. The window can be scaled randomly.

 

(2) Usage

Core needs to reference kit. JS, and iefix. js should be introduced through conditional annotations in IE.

Other requirements

Array. js Array Extension (Can not be referenced)

Anim. js animation Extension

You can,

In the demo, semitransparentloading. JS is used for translucent loading, and Io. JS is used for cross-origin image data retrieval. This load method can be customized.

 

The simplest loading method, such

VaR currentpage = 1;
VaR waterfall = new $ kit. UI. waterfall ({
Container: $ kit. El ('. kitjs-Waterfall-iner') [0],
Load: function (success, end ){
// $ ('# Loadingpins'). Show ();
$ Kit. Io. josnp ({
URL: 'http: // api.flickr.com/services/rest /? Method = Flickr. photos. search & api_key = tags & tags = rose & page = '+ currentpage +' & per_page = 20 & format = JSON & _ ksts = 1339665079110_92 & jsoncallback = dealwithjsonpdata ',
Onsuccess: function (){
Currentpage = Window. loadeddata. Photos. Page + 1;
// Alert (window. loadeddata. Photos. Photo. Length );
VaR items = [];
$ Kit. Each (window. loadeddata. Photos. Photo, function (item ){
Item. Height = math. Round (math. Random () * (300-180) + 180 );
// Fake height
Items. Push ($ kit. newhtml ($ kit. TPL (['<Div class = "kitjs-Waterfall" data-id = "$ {ID}"> ',//
'<A href = "http: // farm/$ {farm} .static.flickr.com/??server=/?id=_###secret=_m.jpg" class = "image" target = "_ blank"> ',//
' ',//
'</A> ',//
'<P class = "Description" >$ {Title} </P> ',//
'</Div> '//
]. Join (''), item). childnodes [0]);
});
Success (items );
Window. timeoutloading = setTimeout (function (){
If (window. Loading ){
Window. Loading. destory ();
Window. Loading = NULL;
}
}, 600)
}
})
},
Mincolcount: 2,
Colwidth: 228
});
Waterfall. Ev ({
Ev: 'loaddata ',
FN: function (){
If (window. timeoutloading ){
Cleartimeout (window. timeoutloading );
Window. timeoutloading = NULL;
}
If (window. Loading = NULL ){
Window. Loading = new $ kit. UI. semitransparentloading ();
}
}
});
Waterfall. Ev ({
Ev: 'resizebegin ',
FN: function (){
If (window. timeoutloading ){
Cleartimeout (window. timeoutloading );
Window. timeoutloading = NULL;
}
If (window. Loading = NULL ){
Window. Loading = new $ kit. UI. semitransparentloading ();
}
}
});
Waterfall. Ev ({
Ev: 'resizeend ',
FN: function (){
Window. timeoutloading = setTimeout (function (){
If (window. Loading ){
Window. Loading. destory ();
Window. Loading = NULL;
}
}, 600)
}
});

Specify a container, a method for loading data, the minimum number of waterfall columns, and the waterfall width (which is fixed)

In the loading method, initialize the DOM node of a single image container and display the specified node height. Put the height and domnode into an array and call the callback parameter succes of the load method.

 

(3) custom events

Currently, three custom events are supported. A load event is generated before the load event is triggered, and the resizebegin and resizeend events are generated during the scaling window, which can be used for loading animation.

 

After several months of hard work, kit now has a complete underlying and basic UI control system, including

1. Complete DOM API

2. Enhanced anim animation class, supporting all CSS animations, including css3 and IE hacker

3. Balanced the range object between IE and W3C, perfectly compatible with all W3C APIs, and synchronized bookmark across browsers

4. Complete OO system, attributes getter, setter, Object Inheritance, Singleton, Module

5. A powerful template system that supports loop and if else condition judgment

6. Complete browser detection, handheld devices, PCs, etc.

7. The basic UI system supports complex page Components

Includes not limited to, mask, floating layer, dialog box, drag and drop, advanced custom enhancement event, enhancement animation, calendar, form, verification, waterfall stream...

8. Basic log, security sandbox, packaging tools, automated scripts, etc.

 

Welcome anyone interested in kit to join our open-source project for construction.

 

No.: kitjs officially discussed the establishment of the QQ group and QQ Group No. 88093625. You are welcome to join the discussion on front-end topics.

 

In addition, our product is a well-known continental Dictionary of Mac version. Recruit C # to develop one. If you are interested, read it.Http://www.eudic.net/company/joinus_eu.aspx