PHP + Jquery combined with ajax to implement drop-down and fade-out waterfall stream effect [no plug-in required] _ php instance

This article mainly introduces the combination of PHP + Jquery and ajax to implement the drop-down and fade-out waterfall effect [no plug-in required]. For more information, see Guidance:

Waterfall flow, also known as Waterfall flow layout. It is a popular website page layout, with the visual display of uneven multi-bar layout. As the page scroll down, this layout will continuously load data blocks and attach them to the current tail. Pinterest was the first website to adopt this layout and gradually became popular in China. Most Fresh sites in China are basically in this type of style, such as huaban, mogujie.com, and Meili.

The whole code is divided into two sections, the specific code is as follows.

Front-end:

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

<? Php foreach ($ xiaohuaList as $ xiaohua):?> <? Php $ q_id = $ xiaohua-> id;?>
<? Php echo CHtml: encode ($ xiaohua-> title);?>
<? Php echo $ xiaohua-> content;?>
); "Class =" fx cursor_p "data-id =" <? Php echo $ q_id;?> "> Share
<? Php endforeach;?>
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 = '<? Php echo $ this-> createUrl ('listxiaohua');?> '; $. 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 image contains var image = new I Mage; 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) {// fade-In 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) {// fade-In 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 );
  
 

The above section describes how to combine PHP + Jquery and ajax to implement the drop-down and fade-out waterfall effect [no plug-in required]. I hope it will be helpful to you, if you have any questions during use, please leave a message and the editor will reply to you in time. At the same time, I would like to thank you for your support for the website!