jQuery scrolls down to instantly load the content to achieve the waterfall flow effect, jquery scrolls down

jQuery scrolls down to instantly load the content to achieve the waterfall flow effect. jquery scrolls down

When the drop-down scroll bar or the mouse wheel scrolls to the bottom of the page, new content is dynamically loaded instantly.

JSON is used to transmit data in the background, and only sample arrays are written in the sample program. The data only has two attributes set, which need to be rewritten according to actual applications.

The page uses ul li as a container, each li represents a column

<ul id="stage"> 
 <li></li> 
 <li></li> 
 <li></li> PHP和Jquery和ajax实现下拉淡出瀑布流效果（无需插件） 
 <li></li> 
</ul>

Copy after login

JS code

/* 
@版本日期: 版本日期: 2012年4月11日 
@著作权所有: 1024 intelligence ( http://www.1024i.com ) 
获得使用本类库的许可, 您必须保留著作权声明信息. 
报告漏洞，意见或建议, 请联系 Lou Barnes(iua1024@gmail.com) 
*/ 
$(document).ready(function(){ 
 loadMore(); 
}); 
$(window).scroll(function(){ 
 // 当滚动到最底部以上100像素时， 加载新内容 
 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]; 
     // 找出当前高度最小的列, 新内容添加到该列 
     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(); 
    } 
   } 
  } 
 }); 
}

Copy after login

Let me share with you a piece of code: PHP Jquery and ajax are combined to achieve the drop-down and fade-out waterfall flow effect

My style, no more nonsense, interested friends can directly read the code below:

Front desk:

<br><&#63;php <br>$category=$this->getMyVal('category',$_GET);<br>$xiaohuaList=Xiaohua::model()->getXiaohao($category); //打开页面默认显示的数据<br>&#63;><br><br><div id="waterfall">
<&#63;php foreach ($xiaohuaList as $xiaohua):&#63;>
<&#63;php $q_id=$xiaohua->id;&#63;>
<div class="cell m-bg item-h border_h">
<div class="border-solid-b padding-b-5 text-center"><span class="g-bg glyphicon glyphicon-sunglasses margin-r-5" aria-hidden="true"></span><strong class="color-5 fx_t_<&#63;php echo $q_id;&#63;>"><&#63;php echo CHtml::encode($xiaohua->title);&#63;></strong></div>
<div class="padding-t-5 fx_c_<&#63;php echo $q_id;&#63;>"><&#63;php echo $xiaohua->content;&#63;></div>
<div class="padding-t-5 text-right"><span onclick="fx(<&#63;php echo $q_id;&#63;>);" class="fx cursor_p" data-id="<&#63;php echo $q_id;&#63;>"><span class="g-bg glyphicon glyphicon-share-alt margin-r-5" aria-hidden="true"></span>分享</span></div>
</div>
<&#63;php endforeach;&#63;>
</div>
<script>
var opt={
getResource:function(index,render){//index为已加载次数,render为渲染接口函数,接受一个dom集合或jquery对象作为参数。通过ajax等异步方法得到的数据可以传入该接口进行渲染，如 render(elem)
var html='';
var _url='<&#63;php echo $this->createUrl('listXiaohua');&#63;>';
$.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 class="cell m-bg item-h border_h"><div class="border-solid-b padding-b-5 text-center"><span class="g-bg glyphicon glyphicon-sunglasses margin-r-5" aria-hidden="true"></span><strong class="color-5 fx_t_'+q_id+'">'+data[i].title+'</strong></div><div class="padding-t-5 fx_c_'+q_id+'">'+data[i].content+'</div>'
+'<div class="padding-t-5 text-right"><span onclick="fx('+q_id+');" class="fx cursor_p" data-id="'+q_id+'"><span class="g-bg glyphicon glyphicon-share-alt margin-r-5" aria-hidden="true"></span>分享</span></div></div>';
}
}});
return $(html);
},
column_width:376,
column_space:10,
auto_imgHeight:true,
insert_type:1
}
$('#waterfall').waterfall(opt);
</script>

Copy after login

Backstage:

public function actionListXiaohua() {
$xiaohuaList=Xiaohua::model()->getXiaohua();//获取笑话信息
echo CJSON::encode($xiaohuaList);
}

Copy after login

js:

;(function($){
var
//参数
setting={
column_width:240,//列宽
column_className:'waterfall_column',//列的类名
column_space:2,//列间距
cell_selector:'.cell',//要排列的砖块的选择器，context为整个外部容器
img_selector:'img',//要加载的图片的选择器
auto_imgHeight:true,//是否需要自动计算图片的高度
fadein:true,//是否渐显载入
fadein_speed:600,//渐显速率，单位毫秒
insert_type:1, //单元格插入方式，1为插入最短那列，2为按序轮流插入
getResource:function(index){ } //获取动态资源函数,必须返回一个砖块元素集合,传入参数为加载的次数
},
//
waterfall=$.waterfall={},//对外信息对象
$waterfall=null;//容器
waterfall.load_index=0, //加载次数
$.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(){//创建列
waterfall.column_num=calculateColumns();//列数
//循环创建列
var html='';
for(var i=0;i<waterfall.column_num;i++){
html+='<div class="'+setting.column_className+'" style="width:'+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);//插入列
return $('.'+setting.column_className,$waterfall);//列集合
}
function calculateColumns(){//计算需要的列数
var num=Math.floor(($waterfall.innerWidth())/(setting.column_width+setting.column_space));
if(num<1){ num=1; } //保证至少有一列
return num;
}
function render(elements,fadein){//渲染元素
if(!$(elements).length) return;//没有元素
var $columns = waterfall.$columns;
$(elements).each(function(i){
if(!setting.auto_imgHeight||setting.insert_type==2){//如果给出了图片高度，或者是按顺序插入，则不必等图片加载完就能计算列的高度了
if(setting.insert_type==1){
insert($(elements).eq(i),setting.fadein&&fadein);//插入元素
}else if(setting.insert_type==2){
insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素
}
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'&#63;$(this).attr('src'):$(this).find(setting.img_selector).attr('src');
image.onload=function(){//图片加载后才能自动计算出尺寸
image.onreadystatechange=null;
if(setting.insert_type==1){
insert($(elements).eq(i),setting.fadein&&fadein);//插入元素
}else if(setting.insert_type==2){
insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素
}
image=null;
}
image.onreadystatechange=function(){//处理IE等浏览器的缓存问题：图片缓存后不会再触发onload事件
if(image.readyState == "complete"){
image.onload=null;
if(setting.insert_type==1){
insert($(elements).eq(i),setting.fadein&&fadein);//插入元素
}else if(setting.insert_type==2){
insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素
}
image=null;
}
}
image.src=src;
}else{//不用考虑图片加载
if(setting.insert_type==1){
insert($(elements).eq(i),setting.fadein&&fadein);//插入元素
}else if(setting.insert_type==2){
insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素
}
}
});
}
function public_render(elems){//ajax得到元素的渲染接口
render(elems,true);
}
function insert($element,fadein){//把元素插入最短列
if(fadein){//渐显
$element.css('opacity',0).appendTo(waterfall.$columns.eq(calculateLowest())).fadeTo(setting.fadein_speed,1);
}else{//不渐显
$element.appendTo(waterfall.$columns.eq(calculateLowest()));
}
}
function insert2($element,i,fadein){//按序轮流插入元素
if(fadein){//渐显
$element.css('opacity',0).appendTo(waterfall.$columns.eq(i%waterfall.column_num)).fadeTo(setting.fadein_speed,1);
}else{//不渐显
$element.appendTo(waterfall.$columns.eq(i%waterfall.column_num));
}
}
function calculateLowest(){//计算最短的那列的索引
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(){//获取资源
$.waterfall.load_index++;
return setting.getResource($.waterfall.load_index,public_render);
}
waterfall._scrollTimer=null;//延迟滚动加载计时器
function onScroll(){//滚动加载
clearTimeout(waterfall._scrollTimer);
waterfall._scrollTimer=setTimeout(function(){
var $lowest_column=waterfall.$columns.eq(calculateLowest());//最短列
var bottom=$lowest_column.offset().top+$lowest_column.outerHeight();//最短列底部距离浏览器窗口顶部的距离
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop||0;//滚动条距离
var windowHeight=document.documentElement.clientHeight||document.body.clientHeight||0;//窗口高度
if(scrollTop>=bottom-windowHeight){
render(getElements(),true);
}
},100);
}
function onResize(){//窗口缩放时重新排列
if(calculateColumns()==waterfall.column_num) return; //列数未改变，不需要重排
var $cells=waterfall.$waterfall.find(setting.cell_selector);
waterfall.$columns.remove();
waterfall.$columns=creatColumn();
render($cells,false); //重排已有元素时强制不渐显
}
})(jQuery);

Copy after login

The above code is divided into two parts to introduce PHP, Jquery and ajax to implement the drop-down and fade-out waterfall flow effect. The code is relatively simple and comes with comments. If there are any bugs, please report them and the editor of Bangkejia will report them as soon as possible. Contact everyone. Thanks!

Articles you may be interested in:

Simple and easy-to-use jQuery-based imitating Sina Weibo scrolling effect (with DEMO)
jQuery waterfall floating layout ( 1) (Delayed AJAX loading of images)
jQuery waterfall absolute positioning layout (2) (Delayed AJAX loading of images)
jQuery product intermittent scrolling down effect core code
PHP combines Jquery and ajax to achieve waterfall flow effects