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

Source: Internet
Author: User
Tags php foreach
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...

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.