MYBLOG

前段时间因工作需要，故而需要实现瀑布流效果，在网上查阅众多资料，在看到谋篇文章后，实现了其效果，因为时间久远，不知是那篇博文了，在此简单介绍下其实现方式。

1、项目目录结构如下

index.aspx页面为瀑布流页面（分页瀑布流效果，每页200条数据）

2、index.aspx.cs文件中获取数据总数，提供给分页，做分页用。

3、在index.aspx页面中创建一个容器

 <div class="jypic">
            <div id="container"></div>
        </div>

CSS样式如下

<style>
        .column {
            display: inline-block;
            vertical-align: top;
            padding: 10px 8px 0;
        }

        .pic_a a {
            text-decoration: none;
        }

        .pic_a {
            display: block;
            padding: 5px;
            margin-bottom: 10px;
            box-shadow: 0 1px 3px rgba(34, 25, 25, 0.2);
            background-color: #fff;
            text-decoration: none;
            margin-bottom: 15px;
            padding-bottom: 10px;
        }

            .pic_a:hover {
                text-decoration: none;
                box-shadow: 0 1px 3px rgba(35, 25, 25, 0.5);
            }

        img:hover {
            opacity: 0.8;
            background: #000 none repeat scroll 0 0;
        }

        .pic_a img {
            display: block;
            margin: 0 auto 5px;
            border: 0;
            vertical-align: bottom;
        }

        .pic_a strong {
            font-size: 14px;
            font-family: "Microsoft Yahei","arial","sans-serif";
            color: #333;
            font-weight: normal;
            color: #666;
        }

        .jypic img {
            width: 200px;
        }

        .pro {
            font-size: 9px;
            font-family: Verdana;
            color: #888;
            font-size: 12px;
        }

        .jypic {
            width: 1200px;
            margin: 0px auto;
        }
    </style>

JS代码请求一般处理程序获取数据并加载

<script type="text/javascript">
            var pics = new Array()
            var ids = new Array();
            var titles = new Array();
            var clicks = new Array();
            $.getJSON('/piclibrary/tool/Handler.ashx',
          { pageIndex:<%=_page%>,WebRole:"", PageSize: "200", random: Math.random() },
             function (data) {
                 $.each(data, function (i, entry) {
                     pics[i] = "http://img01.jnesc.com" + entry['PL_FallsImg'];
                     ids[i] = entry["PL_ID"];
                     titles[i] = entry["PL_Title"];
                     clicks[i] = entry["PL_ClickNum"];
                 });
                 //do detect
                 var waterFall = {
                     container: document.getElementById("container"),
                     columnNumber: 1,
                     columnWidth: 210,
                     indexImage: 0,
                     scrollTop: document.documentElement.scrollTop || document.body.scrollTop,
                     detectLeft: 0,
                     loadFinish: false,
                     // 返回固定格式的图片名
                     getIndex: function () {
                         var index = this.indexImage;
                         return pics[index];
                     },
                     getId: function () {
                         var index = this.indexImage;
                         return ids[index];
                     },
                     getTitle: function () {
                         var index = this.indexImage;
                         return titles[index];
                     },
                     getClick: function () {
                         var index = this.indexImage;
                         return clicks[index];
                     },
                     // 是否滚动载入的检测
                     appendDetect: function () {
                         var start = 0;
                         for (start; start < this.columnNumber; start++) {
                             var eleColumn = document.getElementById("waterFallColumn_" + start);
                             if (eleColumn && !this.loadFinish) {
                                 if (eleColumn.offsetTop + eleColumn.clientHeight < this.scrollTop + (window.innerHeight || document.documentElement.clientHeight)) {
                                     this.append(eleColumn);
                                 }
                             }
                         }
                         return this;
                     },
                     // 滚动载入
                     append: function (column) {
                         this.indexImage += 1;
                         var html = '', index = this.getIndex(), imgUrl = index;
                         if (index != null) {
                             // 图片尺寸
                             var aEle = document.createElement("div");
                             aEle.className = "pic_a";
                             aEle.innerHTML = ' <a class="highslide" onclick="return hs.expand(this)" target="_blank" href="/Gallery/ShowInfo_' + this.getId() + '.html"><img src="' + imgUrl + '" alt="'+this.getTitle()+'" title="'+this.getTitle()+'" /><strong>' + this.getTitle() + '</strong></a> <br> <span class=pro> 点击量：（' + this.getClick() + '）</span> </a>';
                             column.appendChild(aEle);
                         }
                         if (this.indexImage >= 200) {
                             this.loadFinish = true;
                         }
                         return this;
                     },
                     // 页面加载初始创建
                     create: function () {
                         this.columnNumber = Math.floor(1200 / this.columnWidth);
                         var start = 0, htmlColumn = '', self = this;
                         for (start; start < this.columnNumber; start += 1) {
                             htmlColumn = htmlColumn + '<span id="waterFallColumn_' + start + '" class="column" style="width:' + this.columnWidth + 'px;">' +
                             function () {
                                 var html = '', i = 0;
                                 for (i = 0; i < 5; i += 1) {
                                     self.indexImage = start + self.columnNumber * i;
                                     var index = self.getIndex();
                                     if (index != null) {
                                         html = html + '   <a class="highslide pic_a" onclick="return hs.expand(this)" target="_blank" href="/Gallery/ShowInfo_' + self.getId() + '.html"><img src="' + index + '" alt="'+self.getTitle()+'" title="'+self.getTitle()+'" /><strong>' + self.getTitle().substring(0, 50) + '</strong>  <br> <span class=pro> 点击量：（' + self.getClick() + '）</span> </a>';
                                         //html = html + '   <a class="highslide pic_a" onclick="return hs.expand(this)" href=' + index + '  ><img src=' + index + ' /><strong>' + self.getTitle().substring(0, 50) + '</strong>  <br> <span class=pro> ' + self.getClick() + ' click &nbsp;&nbsp;&nbsp;&nbsp; ' + self.getTitle() + ' comment </span> </a><div class="highslide-caption">' + self.getTitle() + ' </div> ';
                                     }
                                 }
                                 return html;
                             }() +
                         '</span> ';
                         }
                         htmlColumn += '<span id="waterFallDetect" class="column" style="width:' + this.columnWidth + 'px;"></span>';
                         this.container.innerHTML = htmlColumn;
                         this.detectLeft = document.getElementById("waterFallDetect").offsetLeft;
                         return this;
                     },

                     refresh: function () {
                         var arrHtml = [], arrTemp = [], htmlAll = '', start = 0, maxLength = 0;
                         for (start; start < this.columnNumber; start += 1) {
                             var arrColumn = document.getElementById("waterFallColumn_" + start).innerHTML.match(/<a(?:.|\n|\r|\s)*?a>/gi);
                             if (arrColumn) {
                                 maxLength = Math.max(maxLength, arrColumn.length);
                                 // arrTemp是一个二维数组
                                 arrTemp.push(arrColumn);
                             }
                         }

                         // 需要重新排序
                         var lengthStart, arrStart;
                         for (lengthStart = 0; lengthStart < maxLength; lengthStart++) {
                             for (arrStart = 0; arrStart < this.columnNumber; arrStart++) {
                                 if (arrTemp[arrStart][lengthStart]) {
                                     arrHtml.push(arrTemp[arrStart][lengthStart]);
                                 }
                             }
                         }
                         if (arrHtml && arrHtml.length !== 0) {
                             // 新栏个数		
                             this.columnNumber = Math.floor(document.body.clientWidth / this.columnWidth);

                             // 计算每列的行数
                             // 向下取整
                             var line = Math.floor(arrHtml.length / this.columnNumber);

                             // 重新组装HTML
                             var newStart = 0, htmlColumn = '', self = this;
                             for (newStart; newStart < this.columnNumber; newStart += 1) {
                                 htmlColumn = htmlColumn + '<span id="waterFallColumn_' + newStart + '" class="column" style="width:' + this.columnWidth + 'px;">' +
                                 function () {
                                     var html = '', i = 0;
                                     for (i = 0; i < line; i += 1) {
                                         html += arrHtml[newStart + self.columnNumber * i];
                                     }
                                     // 是否补足余数
                                     html = html + (arrHtml[newStart + self.columnNumber * line] || '');
                                     return html;
                                 }() +
                             '</span> ';
                             }
                             htmlColumn += '<span id="waterFallDetect" class="column" style="width:' + this.columnWidth + 'px;"></span>';

                             this.container.innerHTML = htmlColumn;

                             this.detectLeft = document.getElementById("waterFallDetect").offsetLeft;

                             // 检测
                             this.appendDetect();
                         }
                         return this;
                     },

                     // 滚动加载
                     scroll: function () {
                         var self = this;
                         window.onscroll = function () {
                             // 为提高性能，滚动前后距离大于100像素再处理
                             var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                             if (!this.loadFinish && Math.abs(scrollTop - self.scrollTop) > 100) {
                                 self.scrollTop = scrollTop;
                                 self.appendDetect();
                             }

                         };
                         return this;
                     },

                     // 浏览器窗口大小变换
                     resize: function () {
                         var self = this;
                         window.onresize = function () {
                             var eleDetect = document.getElementById("waterFallDetect"), detectLeft = eleDetect && eleDetect.offsetLeft;
                             if (detectLeft && Math.abs(detectLeft - self.detectLeft) > 50) {
                                 // 检测标签偏移异常，认为布局要改变
                                 self.refresh();
                             }
                         };
                         return this;
                     },
                     init: function () {
                         if (this.container) {
                             this.create().scroll().resize();
                         }
                     }
                 };
                 waterFall.init();
             });
        </script>

最终实现效果如下：