jquery Masonry and infinitescroll two waterfall stream plug-ins make the most popular waterfall stream picture Display example, through the mouse scrolling picture infinite load similar to the waterfall effect of the picture display. Users can unlimited browsing pictures or content to load the waterfall stream effect indefinitely.
Code:
<script type= "Text/javascript" > Function Item_masonry () {$ ('. Item img '). Load (function () {$ ('. Infinite_scrol
L '). 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 () {$ (this). CSS (' Box-shadow '
, ' 0 1px 5px rgba (35,25,25,0.5) ');
$ ('. Btns ', this). Show ();
}). mouseout (function () {$ (this). CSS (' Box-shadow ', ' 0 1px 3px rgba (34,25,25,0.2) ');
$ ('. Btns ', this). Hide ();
});
Item_masonry ();
} item_callback ();
$ ('. Item '). FadeIn (); var sp = 1 $ (". Infinite_scroll"). Infinitescroll ({navselector: "#more", Nextselector: "#more a", it Emselector: ". Item", loading:{img: "IMAGES/MASONRY_LOADING_1.GIf ", Msgtext: ', finishedmsg: ' Wood has ', finished:function () {sp++;
if (sp>=10) {//To page 10th End Event $ ("#more"). Remove ();
$ ("#infscr-loading"). Hide ();
$ ("#page"). Show ();
$ (window). Unbind ('. Infscr ');
}},errorcallback:function () {$ ("#page"). Show ();
}},function (newelements) {var $newElems = $ (newelements);
$ ('. Infinite_scroll '). Masonry (' appended ', $newElems, false);
$newElems. FadeIn ();
Item_callback ();
Return
});
}); </script>
Demo pictures
The above is the entire content of this article, I hope to be able to learn jquery help.