PHP, Jquery, and ajax implement drop-down and fade out waterfall stream effects (no plug-ins required). jqueryajax_PHP tutorial

PHP, Jquery, and ajax implement drop-down and fade out waterfall stream effects (no plug-ins required), jqueryajax. PHP, Jquery, and ajax implement drop-down to fade out the Waterfall Stream effect (no plug-ins required). jqueryajax is not nonsense and you can directly go to the code. you can also click here to see the waterfall stream effect demonstration. Front-end :? Php $ c PHP, Jquery, and ajax implement drop-down and fade out waterfall stream effects (no plug-ins required), jqueryajax

Click here to view the waterfall stream demonstration.

Front-end:

 $ Category = $ this-> getMyVal ('Category ', $ _ GET );
$ XiaohuaList = Xiaohua: model ()-> getXiaohao ($ category); // open the default data displayed on the page
?>


  
  Id;?>
 Title);?>

  Content;?>
); "Class =" fx cursor_p "data-id ="
  "> Share

 
Script var opt = {getResource: function (index, render) {// index indicates the number of loaded times, render indicates the rendering interface function, and accepts a dom set or jquery object as a parameter. Data obtained through asynchronous methods such as ajax can be passed into this interface for rendering, such as render (elem) var html = ''; var _ url ='
 CreateUrl ('listaohua');?> '; $. Ajax ({type: "get", url: _ url, dataType: "json", async: false, success: function (data) {for (var I in data) {var q_id = data [I]. id; html + ='
'+ Data [I]. title +'
'+ Data [I]. content +'
'+'
Share
';}}); Return $ (html) ;}, column_width: 376, column_space: 10, auto_imgHeight: true, insert_type: 1 }$ (' # waterfall '). waterfall (opt); script

Background:

Public function actionListXiaohua () {$ xiaohuaList = Xiaohua: model ()-> getXiaohua (); // Obtain joke information echo CJSON: encode ($ xiaohuaList );}

Js:

; (Function ($) {var // parameter setting = {column_width: 240, // column width column_className: 'Waterfall _ Column', // column class name column_space: 2, // The column spacing cell_selector :'. cell ', // The selector of the brick to be arranged. The context is the entire external container img_selector: 'IMG'. // The selector auto_imgHeight: true for the image to be loaded, // whether to automatically calculate the image height fadein: true, // whether to load fadein_speed: 600, // The gradient speed, in milliseconds insert_type: 1, // cell insertion mode, 1: Insert the shortest column, 2: insert getResource: function (index) {}// obtain the dynamic resource function in turn, and a set of bricks and elements must be returned, the number of times the input parameter is loaded}, // waterfall = $. waterfall ={}, // object of external information $ waterfall = null; // container waterfall. load_index = 0, // Number of loads $. fn. extend ({waterfall: function (opt) {opt = opt | |{}; setting = $. extend (setting, opt); $ waterfall = waterfall. $ waterfall = $ (this); waterfall. $ columns = creatColumn (); render ($ (this ). find (setting. cell_selector ). detach (), false); // Force waterfall to be not gradually displayed when an existing element is reshuffled. _ scrollTimer2 = null; $ (window ). bind ('scroll ', function () {clearTimeout (waterfall. _ scrollTimer2); waterfall. _ scrollTimer2 = setTimeout (onScroll, 300) ;}); waterfall. _ scrollTimer3 = null; $ (window ). bind ('resize', function () {clearTimeout (waterfall. _ scrollTimer3); waterfall. _ scrollTimer3 = setTimeout (onResize, 300) ;}}}); function creatColumn () {// create the waterfall column. column_num = calculateColumns (); // number of columns // create a column in a loop var html = ''; for (var I = 0; I
 
  
';} $ Waterfall. prepend (html); // Insert column return $ ('. '+ setting. column_className, $ waterfall); // column set} function calculateColumns () {// calculate the required number of columns var num = Math. floor ($ waterfall. innerWidth ()/(setting. column_width + setting. column_space); if (num <1) {num = 1;} // ensure that at least one column of return num;} function render (elements, fadein) {// render element if (! $ (Elements). length) return; // no element var $ columns = waterfall. $ columns; $ (elements). each (function (I) {if (! Setting. auto_imgHeight | setting. insert_type = 2) {// if the image height is given or inserted sequentially, you do not have to wait until the image is loaded to calculate the column height if (setting. insert_type = 1) {insert ($ (elements ). eq (I), setting. fadein & fadein); // Insert element} else if (setting. insert_type = 2) {insert2 ($ (elements ). eq (I), I, setting. fadein & fadein); // Insert element} return true; // continue} if ($ (this) [0]. nodeName. toLowerCase () = 'IMG '| $ (this ). find (setting. img_selector ). length> 0) {// The image itself or the var im containing the image Age = new Image; var src = $ (this) [0]. nodeName. toLowerCase () = 'IMG '? $ (This ). attr ('src'): $ (this ). find (setting. img_selector ). attr ('src'); image. onload = function () {// The image size can be automatically calculated after the image is loaded. onreadystatechange = null; if (setting. insert_type = 1) {insert ($ (elements ). eq (I), setting. fadein & fadein); // Insert element} else if (setting. insert_type = 2) {insert2 ($ (elements ). eq (I), I, setting. fadein & fadein); // Insert element} image = null;} image. onreadystatechange = function () {// handle the cache issue of IE and other browsers: the onload event will not be triggered after the image is cached if (image. readyState = "complete") {image. onload = null; if (setting. insert_type = 1) {insert ($ (elements ). eq (I), setting. fadein & fadein); // Insert element} else if (setting. insert_type = 2) {insert2 ($ (elements ). eq (I), I, setting. fadein & fadein); // Insert element} image = null ;}} image. src = src;} else {// You do not need to consider loading if (setting. insert_type = 1) {insert ($ (elements ). eq (I), setting. fadein & fadein); // Insert element} else if (setting. insert_type = 2) {insert2 ($ (elements ). eq (I), I, setting. fadein & fadein); // Insert element }});} function public_render (elems) {// ajax gets the rendering interface render (elems, true) of the element );} function insert ($ element, fadein) {// insert the element into the shortest column if (fadein) {// progressively show element.css ('Opacity ', 0 ). appendTo (waterfall. $ columns. eq (calculateLowest ())). fadeTo (setting. fadein_speed, 1);} else {// do not show $ element. appendTo (waterfall. $ columns. eq (calculateLowest ();} function insert2 ($ element, I, fadein) {// Insert element if (fadein) in turn in order) {// progressively show element.css ('Opacity ', 0 ). appendTo (waterfall. $ columns. eq (I % waterfall. column_num )). fadeTo (setting. fadein_speed, 1);} else {// do not show $ element. appendTo (waterfall. $ columns. eq (I % waterfall. column_num);} function calculateLowest () {// calculate the index var min = waterfall for the column with the shortest possible length. $ columns. eq (0 ). outerHeight (), min_key = 0; waterfall. $ columns. each (function (I) {if ($ (this ). outerHeight ()
  
   
= Bottom-javaswheight) {render (getElements (), true) ;}}, 100) ;}function onResize () {// rearrange if (calculateColumns () when the window is scaled () = waterfall. column_num) return; // The number of columns has not changed. you do not need to rearrange var $ cells = waterfall. $ waterfall. find (setting. cell_selector); waterfall. $ columns. remove (); waterfall. $ columns = creatColumn (); render ($ cells, false); // force not fade when an existing element is rearranged}) (jQuery );
  
 

All done. Here is a demonstration of the Waterfall Stream effect.

Pipeline (no plug-ins required), jqueryajax is not nonsense. you can also click here to see the waterfall stream effect demonstration. Front-end :? Php $ c...