Home>

When the drop-down scrollbar or mouse wheel scrolls to the bottom of the page, Load new content on the fly.

The background uses json to transfer data, Only sample arrays are written in the sample program.The data also has only two properties set, Need to be rewritten according to the actual application.

The page uses ul li as a container. Each li represents a column

<ul>
 <li></li>
 <li></li>
 <li></li>PHP and jquery and ajax to implement drop-down fade-out waterfall effect (no plugin required)
 <li></li>
</ul>

js code

/*
@Version Date:Rev. Date:April 11, 2012
@Copyright All:1024 intelligence (http://www.1024i.com)
Obtain permission to use this library, You must retain copyright notice information.
Report a vulnerability,Comments or suggestions, Please contact lou barnes ([email protected])
* /
$(document) .ready (function () {
 loadmore ();
});
$(window) .scroll (function () {
 //When scrolling to 100 pixels above the bottom, load new content
 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<l;i ++)
    {
     oproduct=json [i];
     //find the column with the smallest current height, New content added to the column
     iheight=-1;
     $("#stage li"). each (function () {
      itempheight=number ($(this) .height ());
      if (iheight ==-1 || iheight > itempheight)
      {
       iheight=itempheight;
       $row=$(this);
      }
     });
     $item=$("<div><img src =" "+ oproduct.image +" "border =" 0 "><br />"+oproduct.title+"</div>"). hide ();
     $row.append ($item);
     $item.fadein ();
    }
   }
  }
 });
}

Let's share a piece of code for everyone:PHP jquery and ajax combined to achieve the effect of drop-down fade out waterfall

my style,Not much nonsense,Interested friends directly look at the following code:

Front desk:

<br>?php<$category=$this->getmyval ("category", $_ get);<br>$xiaohualist=xiaohua ::model ()->getxiaohao ($category);//The data displayed by default on the open page<br>?><br><br><div>
<?php foreach ($xiaohualist as $xiaohua):?>
<?php $q_id=$xiaohua->id;?>
<div>
<div><span aria-hidden="true"></span><strong><?php echo chtml ::encode ($xiaohua->title);?</strong></div>
<div><?php echo $xiaohua->content;?></div>
<div<span onclick="fx (<?php echo $q_id;?>);" data-id="<?php echo $q_id;?""><span aria-hidden="true"></span>share</span></div>
</div>
<?php endforeach;?>
</div>
<script>
var opt={
getresource:function (index, render) {//index is the number of times loaded,render is a rendering interface function,Takes a dom collection or jquery object as a parameter.
Data obtained through asynchronous methods such as ajax can be passed into this interface for rendering.
Like 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 +="<div><div><span aria-hidden =" true "></span><strong + q_id +" ">" + data [i] .title + "</strong> ;</div><div + q_id + "">"+ data [i] .content +"</div>"
+ "<div><span onclick =" fx ("+ q_id +");"data-id =" "+ q_id +" "><span aria-hidden =" true "<//span>Share</span></div></div>";
}
}});
return $(html);
},column_width:376,column_space:10,auto_imgheight:true,insert_type:1
}
$("#waterfall"). waterfall (opt);
</script>

Backstage:

public function actionlistxiaohua () {
$xiaohualist=xiaohua ::model ()->getxiaohua ();//Get joke information
echo cjson ::encode ($xiaohualist);
}

js:

;(function ($) {
var
//parameter
setting={
column_width:240, //Column width
column_classname:"waterfall_column", //The class name of the column
column_space:2, //Column spacing
cell_selector:". cell", //The selector of the bricks to be arranged,context is the entire external container
img_selector:"img", //The selector of the image to be loaded
auto_imgheight:true, //whether you need to calculate the height of the picture automatically
fadein:true, //Whether fade in loading
fadein_speed:600, ///fade rate,Unit millisecond
insert_type:1, //Cell insertion method,1 is to insert the shortest column,2 for sequential insertion
getresource:function (index) {} //Get dynamic resource function,Must return a collection of brick elements,Incoming parameter is the number of loadings
},//
waterfall=$. waterfall=(), //outer information object
$waterfall=null;//container
waterfall.load_index=0, //load times
$.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);
waterfall._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 column
waterfall.column_num=calculatecolumns ();//Number of columns
//Creating columns
var html="";
for (var i=0;i<waterfall.column_num;i ++) {
html +="<div + setting.column_classname +" "+ setting.column_width +" px;display:inline-block;* display:inline;zoom:1;margin-left:"+ setting.column_space/2 +" px;margin -right:"+ setting.column_space/2 +" px;vertical-align:top;overflow:hidden "></div>";
}
$waterfall.prepend (html);//Insert column
return $("." + setting.column_classname, $waterfall);//column collection
}
function calculatecolumns () {//Calculate the number of columns required
var num=math.floor (($waterfall.innerwidth ())/(setting.column_width + setting.column_space));
if (num<1) {num=1;} //guaranteed at least one column
return num;
}
function render (elements, fadein) {//rendering elements
if (! $(elements) .length) return;//No element
var $columns=waterfall. $columns;
$(elements) .each (function (i) {
if (! setting.auto_imgheight || setting.insert_type == 2) {//If an image height is given,Or insert them in order,You don't have to wait for the image to load to calculate the height of the column
if (setting.insert_type == 1) {
insert ($(elements) .eq (i), setting.fadein&&fadein);//Insert elements
} else if (setting.insert_type == 2) {
insert2 ($(elements) .eq (i), i, setting.fadein&&fadein);//Insert elements
}
return true;//continue
}
if ($(this) [0] .nodename.tolowercase () == "img" || $(this) .find (setting.img_selector) .length>0)
var image=new image;
var src=$(this) [0] .nodename.tolowercase () == "img"?$(this) .attr ("src"):$(this) .find (setting.img_selector) .attr ("src");
image.onload=function () {//The size can be calculated automatically after the image is loaded
image.onreadystatechange=null;
if (setting.insert_type == 1) {
insert ($(elements) .eq (i), setting.fadein&&fadein);//Insert elements
} else if (setting.insert_type == 2) {
insert2 ($(elements) .eq (i), i, setting.fadein&&fadein);//Insert elements
}
image=null;
}
image.onreadystatechange=function () {//Handle browser cache issues such as ie: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 elements
} else if (setting.insert_type == 2) {
insert2 ($(elements) .eq (i), i, setting.fadein&&fadein);//Insert elements
}
image=null;
}
}
image.src=src;
} else {//don't worry about image loading
if (setting.insert_type == 1) {
insert ($(elements) .eq (i), setting.fadein&&fadein);//Insert elements
} else if (setting.insert_type == 2) {
insert2 ($(elements) .eq (i), i, setting.fadein&&fadein);//Insert elements
}
}
});
}
function public_render (elems) {//ajax get the element's rendering interface
render (elems, true);
}
function insert ($element, fadein) {//Insert the element into the shortest column
if (fadein) {//gradually show
$element.css ("opacity", 0) .appendto (waterfall. $columns.eq (calculatelowest ())). fadeto (setting.fadein_speed, 1);
} else {//not gradually
$element.appendto (waterfall. $columns.eq (calculatelowest ()));
}
}
function insert2 ($element, i, fadein) {//Insert elements in turn in turn
if (fadein) {//gradually show
$element.css ("opacity", 0) .appendto (waterfall. $columns.eq (i%waterfall.column_num)). fadeto (setting.fadein_speed, 1);
} else {//not gradually
$element.appendto (waterfall. $columns.eq (i%waterfall.column_num));
}
}
function calculatelowest () {//Calculate the index of the shortest column
var min=waterfall. $columns.eq (0) .outerheight (), min_key=0;
waterfall. $columns.each (function (i) {
if ($(this) .outerheight ()<min) {
min=$(this) .outerheight ();
min_key=i;
}
});
return min_key;
}
function getelements () {//Get resources
$.waterfall.load_index ++;
return setting.getresource ($. waterfall.load_index, public_render);
}
waterfall._scrolltimer=null;//Delayed scroll loading timer
function onscroll () {//Scroll loading
cleartimeout (waterfall._scrolltimer);
waterfall._scrolltimer=settimeout (function () {
var $lowest_column=waterfall. $columns.eq (calculatelowest ());//The shortest column
var bottom=$lowest_column.offset (). top + $lowest_column.outerheight ();//The distance from the bottom of the shortest column to the top of the browser window
var scrolltop=document.documentelement.scrolltop || document.body.scrolltop || 0;//Scroll bar distance
var windowheight=document.documentelement.clientheight || document.body.clientheight || 0;//Window height
if (scrolltop>= bottom-windowheight) {
render (getelements (), true);
}
}, 100);
}
function onresize () {//Rearrange when the window is scaled
if (calculatecolumns () == waterfall.column_num) return;//The number of columns has not changed,No need to rearrange
var $cells=waterfall. $waterfall.find (setting.cell_selector);
waterfall. $columns.remove ();
waterfall. $columns=creatcolumn ();
render ($cells, false);//Forcibly do not fade when rearranging existing elements
}
}) (jquery);
php
  • Previous jQuery formValidator
  • Next Android programming method for adding menus to applications