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

<! 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 =   '<div>' +

                                 '<div><img src="{img}" width="195" /></div>' +

                                 '<div>{about}</div>' +

                                 '<div>{title}</div>' +

                                 '<div>{start}</div>' +

                      '</div>' ;

            

               /**

             * 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   <858864436@qq.com>

  */

;( 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<data_len; 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.cols; 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)