jquery scroll down instantly load content implemented waterfall stream effect _php instance

Source: Internet
Author: User
Tags php foreach
Loads new content dynamically as the drop-down scroll bar or mouse wheel scrolls to the bottom of the page.

The background uses JSON to transfer data, and the example program only writes sample arrays. The data is also set to only two attributes, which need to be rewritten according to the actual application.

The page uses UL Li as a container, each LI represents a column

  • PHP and jquery and Ajax implement drop-down waterfall streaming effects (no plugins required)

JS Code

/* @ Version Date: Version Date: April 11, 2012 @ Copyright: 1024x768 Intelligence (http://www.1024i.com) obtaining permission to use the library, you must retain the copyright Declaration information. To report a bug, comment or suggestion, please contact Lou Barnes (iua1024@gmail.com) */$ (document). Ready (function () {Loadmore ();}); $ (window). Scroll (function () {///when scrolling to the bottom 100 pixels, the new content is loaded if ($ (document). Height ()-$ (this). ScrollTop ()-$ (this). Height ( ) <100) Loadmore (); }); function Loadmore () {$.ajax ({url: ' data.php ', DataType: ' JSON ', success:function (JSON) {if (typeof json     = = ' object ') {var oproduct, $row, iheight, itempheight;  For (var i=0, l=json.length; i 
    Itempheight) {iheight = Itempheight;       $row = $ (this);      }      });      $item = $ (' 
' +oproduct.title+ '). Hide (); $row. Append ($item); $item. FadeIn (); } } } }); }

Let's share a piece of code: PHP jquery and Ajax combine to achieve a drop-out waterfall stream effect

My style, nonsense not much to say, interested friends directly look at the following code:

Front desk:

$category = $this->getmyval (' category ', $_get);
$xiaohuaList =xiaohua::model ()->getxiaohao ($category); Open the data displayed by default on the page

<?php foreach ($xiaohuaList as $xiaohua): ><?php $q _id= $xiaohua->id;? ><?php echo chtml::encode ($xiaohua->title);? >"><?php echo $xiaohua->content;? > share



;(function ($) {var//parameter setting={column_width:240,//column width column_classname: ' Waterfall_column ',//column class name column_space:2,// Column spacing cell_selector: '. Cell ',//selector of the bricks to be arranged, context for the entire external container img_selector: ' img ',//selector to load the picture auto_imgheight:true,// Whether you need to automatically calculate the height of the picture fadein:true,//whether fade load fadein_speed:600,//fade rate, unit milliseconds insert_type:1,//Cell insertion method, 1 for inserting the shortest column, 2 for sequential Insert Getresource:function (index) {}///Get dynamic resource function, you must return a brick element collection, passing in the parameter is the number of times loaded},//waterfall=$.waterfall={},//external information object $ waterfall=null;//container waterfall.load_index=0,//Load Count $.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); Forces the Fade waterfall._scrolltimer2=null;$ (window) to be forced to rearrange existing elements. 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 column waterfall.column_num=calculatecolumns ();//column//Cycle create column Var html= "; for (Var i=0;i
0) {//itself is a picture or contains a picture var image=new image;var src=$ (This) [0].nodename.tolowercase () = = ' img '? $ (this). attr (' src '): $ (this). Find (Setting.img_selector). attr (' src '); Image.onload=function () {//images can be automatically calculated after loading image.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 () {//handles caching issues with browsers such as IE: the onload event will no longer be triggered after the picture 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{//do not consider picture 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 render interface of the element render (elems,true);} function Insert ($element, Fadein) {//Inserts the element into the shortest column if (Fadein) {//Fade $element.css (' opacity ', 0). AppendTo (waterfall.$ Columns.eq (Calculatelowest ())). FadeTo (setting.fadein_speed,1);} else{//Not Fade $element.appendto (waterfall. $columns. EQ (calculatelowest ()));}} function Insert2 ($element, I,fadein) {//sequentially Insert element if (Fadein) {//Fade $element.css (' opacity ', 0). AppendTo (waterfall.$ Columns.eq (I%waterfall.column_num)). FadeTo (setting.fadein_speed,1);} else{//Not Fade $element.appendto (waterfall. $columns. EQ (i%waterfall.column_num));}} function Calculatelowest () {//The index of the shortest column Var min=waterfall. $columns. EQ (0). Outerheight (), min_key=0;waterfall.$ Columns.each (function (i) {if ($ (this). Outerheight ()
   =bottom-windowheight) {render (GetElements (), true);}},100);} The function onResize () {///window is scaled to rearrange if (Calculatecolumns () ==waterfall.column_num) return;//The number of columns has not changed, 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 re-queued) (jQuery);

The above code is divided into two parts to introduce PHP and jquery and Ajax to achieve the drop-out waterfall stream effect, the code is relatively simple, with comments, if there is a bug welcome, the script of the small will be in the first time and you contact. Thank you!

  • Related Article

    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.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.