Jquery plug-in provides an example of waterfall Stream Image Display.

Jquery plug-in provides an example of waterfall Stream Image Display.

Jquery masonry and infinitescroll are two waterfall stream plug-ins used to create the most popular waterfall Stream Image Display instances. They can scroll through the mouse to display images that are infinitely loaded with similar Waterfall Effects. Users can browse images or content infinitely and load waterfall streams.

Code:

<Script type = "text/javascript"> function item_masonry () {$ ('. item img '). load (function () {$ ('. infinite_scroll '). masonry ({itemSelector :'. masonry_brick ', columnWidth: 226, gutterWidth: 15}) ;}; $ ('. infinite_scroll '). masonry ({itemSelector :'. masonry_brick ', columnWidth: 226, gutterWidth: 15}) ;}$ (function () {function item_callback () {$ ('. item '). mouseover (function () {callback (this).css ('box-shadow', '0 1px 5px rgba (35,25, 25, 0.5) '); $ ('. btns ', this ). show ();}). mouseout (function () {callback (this).css ('box-shadow', '0 1px 3px rgba (0.2, 25,) '); $ ('. btns ', this ). hide () ;}); item_masonry () ;}item_callback (); $ ('. item '). fadeIn (); var sp = 1 $ (". infinite_scroll "). infinitescroll ({navSelector: "# more", nextSelector: "# more a", itemSelector :". item ", loading: {img:" images/masonry_loading_1.gif ", msgText:'', finishedMsg: 'wood have', finished: function () {sp ++; if (sp> = 10) {// end event on page 10th $ ("# more "). remove (); $ ("# infscr-loading "). hide (); $ ("# page "). show (); $ (window ). unbind ('. infscr ') ;}}, errorCallback: function () {$ ("# page "). show () ;}, function (newElements) {var $ newElems =$ (newElements); $ ('. infinite_scroll '). masonry ('append', $ newElems, false); $ newElems. fadeIn (); item_callback (); return ;}); </script>

Demo Image

The above is all the content of this article, hoping to help you learn jQuery.