jQuery实现瀑布流的取巧做法分享

分析:瀑布流,做法有2种

(1)绝对定位方案:每个单元格设置为绝对定位,通过计算,分别设置 top,left 即可实现

(2)浮动方案:弄N列布局(浮动),然后图片数据,按顺序依次插入,如N为3列 ,第一张图片插入到第一列,第二张图片插入到第二列,第三张图片插入到第三列,第四张图片插入到第一列........这样循环插入(不能自适应)

CSS与HTML代码

代码如下:
display:block;font-size:0;content:" ";clear:both; height:0;}.clearfix{*zoom:1} /*瀑布流*/ .wallList{width:860px;} .wallList li{float:left;display:inline;margin-right:16px;} .wallList li a{background:#eee;border:1px solid #ccc;padding:5px 5px 0 5px;display:block;margin-bottom:10px;} .wallList li a:hover{border-color:#f60;} .wallList li .name{display:block;text-align:center;padding:8px 0;} .loadTips{text-align:center;padding:15px 0;}

代码如下:
  • 正在加载......

    使用jQuery实现,大概思路如下:

      (1)获取N列中 最小的高度值,JS提供的API是Math.min(),但这个API最多只能传入 2 个参数,所以就需要用aplly来扩展,Math.min.apply(null,[xxx,xxx,xxxx,xxxx])   (2)给 window 绑定 scroll事件,下拉的时候获取 $(document).scrollTop() , 当 $(document).scrollTop() 大于 最小的高度值,就ajax请求url,如果有数据,就往页面插入HTML结构,没有则提示 “加载完”,然后window解绑此事件

    代码如下:
    ":"图片1"}, {"href":"http:xxxxxxx","src":"":"图片2"},"src":"":"图片3"},"src":"":"图片4"},"src":"":"图片5"},"src":"":"图片6"},"src":"":"图片7"},"src":"":"图片8"},"src":"":"图片9"},"src":"":"图片10"},"src":"":"图片11"},"src":"":"图片12"},"src":"":"图片13"},"src":"":"图片14"},"src":"":"图片15"},"name":"图片16"},"src":"":"图片17"},"name":"图片18"},"name":"图片19"},"name":"图片20"},"name":"图片21"},"name":"图片22"},"name":"图片23"},"name":"图片24"},"name":"图片25"},"src":"":"图片26"},"name":"图片27"},"name":"图片28"},"src":"":"图片29"},"name":"图片30"} ] } var wallPic = function(){ var $target = $('#wallList'), $li = $target.find('li'), $tips = $('#loadTips'), oTop = 0,//滚动判断的值 row = 3,//列数 page = 1,//ajax请求的页码值 url = 'xxxx',//ajax请求地址 on_off = true; //插入结构的开关,防止ajax错误性多次加载数据 return{ fillData:function(callback){ var _that = this; on_off = false; /* ajax --------------------*/ // $.get(url,{ page:page,count:30 },function(json){ // if(json.status==1){ // _that.appendHTML(json.data); // on_off = true; // page++; // }else{ // _that.loadedTips(); // } // },'json'); /* 模拟测试-设置定时器模拟ajax请求数据 -----------------------*/ setTimeout(function(){ // 模拟终止 if(page==3){ _that.loadedTips(); return; } _that.appendHTML(testJson.data); on_off = true; page++; },400); }, appendHTML:function(data){ var len = data.length, n = 0; for(;n(row-1)?k=n%row:k=n; $li[k].innerHTML += ''; } this.getoTop(); }, getoTop:function(){ oTop = Math.min.apply(null,[$li.eq(0).height(),$li.eq(1).height(),$li.eq(2).height()])+$target.offset().top; }, loadedTips:function(){ $('#loadTips').find('span').text('数据已加载完'); setTimeout(function(){ $('#loadTips').css({'visibility':'hidden'}); },200); // 解绑事件 $(window).unbind('scroll',$.proxy(this.scrollEvent,this)); }, scrollEvent:function(){ if($(document).scrollTop()+$(window).height()>oTop&&on_off){ this.fillData(); } }, init:function(){ this.fillData(); $(window).bind('scroll',this)); } } }(); wallPic.init();

    相关文章

    页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
    jQuery实时显示日期、时间 html: <span id=&quot...
    jQuery 添加水印 <script src="../../../.....
    中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
    1. 用Response.Write方法 代码如下: Response.Write(&q...
    Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...