仿淘宝/蘑菇街形式,瀑布流效果 -- 固定列数

DOCTYPE   html   PUBLIC   "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd"   >
< html >
< head >
< meta   http-equiv = "Content-Type"   content = "text/html; charset=UTF-8" >
< title >   瀑布流实例 title   >
< link   type = "text/css"   rel = "stylesheet"   href = "./7.css"   />
< script   type = "text/javascript"   src = "http://www.haodou.com/public/js/jquery-1.5.1.min.js"   > script >
< script   type = "text/javascript"   src = "./7.js" >   script >
head >
< body >
         < div   id =   "waterfall_container1"   class = "left" >
               < div   class = "img_container1"   > div >
               < div   class = "img_container1"   > div >
               < div   class = "img_container1"   > div >
               < div   style =" clear   : both ;" > div   >
         div >
         < div   id =   "waterfall_container2"   class = "right" >
               < div   class = "img_container"   > div >
               < div   class = "img_container"   > div >
               < div   class = "img_container"   > div >
               < div   style =" clear   : both ;" > div   >
         div >
         < div   style =" clear   : both ;" > div   >
      
         < script   type = "text/javascript"   >
            var   tpl =   '
' +
                                 '
'
+
                                 '
{about}
'
+
                                 '
{title}
'
+
                                 '
{start}
'
+
                      '
'
;
            
               /**
             * waterfall:                       瀑布流效果的入口函数
             * $("#waterfall_container1"):     外层容器的对象 (必填)
             * url:                             ajax请求的url地址,可以带参数 (必填)
             * tpl:                             前端HTML模板,其中{img},{about},{title},{start} 必须与 ajax返回的数组下标一致
             *                                  img,about,title,start命名可以随意 (必填)
             * selector:                        外层容器(waterfall_container1)中的每列容器(img_container1)的class名称,
             *                                  格式:‘.img_container1’,注意别忘记‘.’,默认值:‘.img_container’ (非必填)
             * max_page:                        ajax请求最大的页数,默认为:5 ,超过该值不再发送ajax请求(非必填)
             *
             * waterfall_1 :                    返回函数(setActive), 参数val:设置是否开启根据窗口下拉比例多次获取函数,false:不开启,true:开启,默认:true
             *                                  作用:用于多标签切换,只有当前选中tal标签才能继续通过ajax获取数据,其它一律不能获取数据,tal标签切换时手动触发该函数
             */
            var   waterfall_1 = waterfall($( "#waterfall_container1" ), {url: './7.php?a=1&b=2'   , tpl:tpl, selector: '.img_container1' , max_page:10});
               //waterfall_1.setActive(false);
            
            var   waterfall_2 = waterfall($( "#waterfall_container2" ), {url: './7__.php' , tpl:tpl});
               //waterfall_2.setActive(false);
         script >
body >
html >




/**
  *   瀑布流效果JS
  *
  *   @author   lixiaogang   <[email protected]>
  */
;( function (){
         //保存每个选项卡所对应的数据[instance的json结构]
         var   instances = [], $win = $(window), scroll_top = 0;

         /**
         *   瀑布流效果入口函数
         *   @param     object          el                    瀑布流外层的容器的节点对象
         *   @param     json      options                     json对象:
         *                                                   url:ajax请求路径(必填),
         *                                                   tpl:html模板(必填),
         *                                                   selector:ajax数据填充节点的class名称,默认为:.img_container
         *                                                   max_page:ajax获取最大的页数,默认为:5
         *
         *   @return    object                              setActive:设置是否开启根据窗口下拉比例多次获取函数,false:不开启,true:开启
         */
      waterfall =   function (el, options) {
               if (!options.url || !options.tpl)   return ;
               var   instance = {element: el, active:   true , loading:   true , page: 0, max_page:5};
               if (options.max_page) instance = $.extend(instance, {max_page:options.max_page});
            instance.options = $.extend({selector:   '.img_container' }, options);
            instance.children = $(el).find(instance.options.selector);
            instance.cols = instance.children.length;

               var   index = instances.length;
            instances[index] = instance;

            load(instance);

               return   {
                  setActive:   function (val) {
                        instances[index].active = !!val;
                  }
            };
      };

         //ajax 动态获取数据
         function   load(instance) {
            instance.page++;
               if (instance.page > parseInt(instance.max_page))   return ;
            $.getJSON(instance.options.url, {page:instance.page},   function (data) {
                     var   data_len = data.length, temp = [];   //临时保存html
                     for ( var   i=0; i
                           var   item = data.shift(), index = i % instance.cols;
                           if ( 'undefined'   ==   typeof   temp[index]) temp[index] =   '' ;
                        temp[index] += instance.options.tpl.replace( /\{\w+\}/g   ,   function (m) { return   item[m.substring(1,m.length-1)];});
                  }
                     if (0 < temp.length){
                           for ( var   i=0; i
                              instance.children.eq(i).append(temp[i]);
                        }
                  }
                  instance.loading =   false ;
            });
      };

         /**
         *   窗口绑定事件
         *   1.     active=false     不触发ajax的数据获取
         *   2.     loading=true     表示正在进行ajax数据获取,不进行多次数据获取
         */
      $win.scroll(   function () {
               var   temp_scroll_top = $win.scrollTop();
               if   (temp_scroll_top > scroll_top && ($win.height() + $win.scrollTop()) >= $( "body"   ).height()-100) {
                  scroll_top = temp_scroll_top;
                  $.each(instances,   function (i, instance){
                           if   (!instance.active || instance.loading)   return ;
                        instance.loading =   true ;
                        load(instance);
                  });
            }
      });
})();

123宝贝网(www.123baby.net)

你可能感兴趣的:(JS+CSS+DIV常用效果)