zoukankan      html  css  js  c++  java
  • 瀑布流之我见

    现在有很多网站都很流行瀑布流,一直想自己动手写一下,前段时间在网上找了两个关于瀑布流的插件,但是做出来感觉没太有成就感,所以痛下决心,决定自己写一个,所以开始少上网找资料,查找思路,最近终于在一番努力下写了出来,中间可能参考了很多人的代码以及实例,但是当自己真正的完成了以后发现还是比较有成就感的,在这里将他写出来,也供大家参考一下:

    可能和别人写的有很多共同的地方,没办法思路就那么几种,而且我也参考了几位同人的代码和编程方式,如果感觉有相同的大家勿怪,在这里我主要参考了http://www.cnblogs.com/NNUF/archive/2012/09/10/2679466.html这位仁兄的瀑布流的绝对定位的写法,我主要改进的地方是把它按高低加载排序,它的写法主要是从左往右每一列反复循环添加,但是由于没有做高低的排序加载,所以这样造成有的列可能特别长,有的可能特别段,所以在此基础上我加入自己的想法略作修改,各位看之前可以先看看这位仁兄的写法,我在这里就不在讲解那些思路和细节问题,在这里紧紧贴出代码和demo,供大家参考

      1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      2 <html xmlns="http://www.w3.org/1999/xhtml">
      3 <head runat="server">
      4     <title>无标题页</title>
      5     <style type="text/css">
      6         html, body { height: 100%; /*background: url("/images/brick.jpg") repeat fixed;*/}
      7         html, body, #warp p { margin: 0; padding: 0; }
      8         #warp { margin: 20px auto; position: relative; min-height: 1000px; }
      9         #warp .cell { padding: 10px; border: 1px solid #ccc; box-shadow: 2px 2px 5px #ccc; overflow: hidden; background:white; }
     10         #warp .cell a { text-decoration: none; color: #878787; font: 14px/1.5em Microsoft YaHei; }
     11         img { border: none; }
     12     </style>
     13 
     14     <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
     15 
     16     <script type="text/javascript">
     17         var data = [
     18         { imgUrl: 'images/01.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位01', height: 273 },
     19         { imgUrl: 'images/02.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位02', height: 144 },
     20         { imgUrl: 'images/03.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位03', height: 168 },
     21         { imgUrl: 'images/04.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位04', height: 275 },
     22         { imgUrl: 'images/05.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位05', height: 288 },
     23         { imgUrl: 'images/06.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位06', height: 272 },
     24         { imgUrl: 'images/07.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位07', height: 285 },
     25         { imgUrl: 'images/08.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位08', height: 282 },
     26         { imgUrl: 'images/09.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位09', height: 190 },
     27         { imgUrl: 'images/10.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位10', height: 236 },
     28         { imgUrl: 'images/11.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位11', height: 225 },
     29         { imgUrl: 'images/12.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位12', height: 264 },
     30         { imgUrl: 'images/13.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位13', height: 144 },
     31         { imgUrl: 'images/14.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位14', height: 192 },
     32         { imgUrl: 'images/15.jpg', link: 'javascript:void(0)', title: '瀑布流绝对定位15', height: 343 }
     33     ];
     34         var waterFull = function(obj) {
     35             var id = obj.id,
     36             picWidth = obj.picWidth || 190,                     //图片宽度
     37             columnPadding = obj.columnPadding || 10,            //列的padding值
     38             columnBorder = obj.columnBorder || 1,               //列的边框值
     39             columnMarginLeft = obj.columnMarginLeft || 20,      //列的margin值
     40             //一个格子的总宽度
     41              cellClientWidth = picWidth + columnPadding * 2 + columnBorder * 2,
     42 
     43              obody = document.getElementsByTagName("body")[0],
     44              owarp = document.getElementById(id),
     45             //记录当前插入的格子数量
     46             nowNum = 0,
     47             //存储每一个模块
     48             cells = [];
     49             //记录每一列的高度
     50             lenArr = [];
     51 
     52             //获取数字数组最小值的索引
     53             function getMinKey(arr) {
     54                 var a = arr[0];
     55                 var b = 0;
     56                 for (var k in arr) {
     57                     if (arr[k] < a) {
     58                         a = arr[k];
     59                         b = k;
     60                     }
     61                 }
     62                 return b;
     63             }
     64             //获取列数
     65             function getColumnNum() {
     66                 var columnNum = Math.floor(obody.clientWidth / (cellClientWidth + columnMarginLeft));
     67                 owarp.style.width = columnNum * (cellClientWidth + columnMarginLeft) - columnMarginLeft + 'px';
     68                 return columnNum;
     69             }
     70 
     71             function init() {
     72                 for (var x = 0; x < getColumnNum(); x++) {
     73                     lenArr[x] = 0;
     74                 }
     75             }
     76 
     77             //创建格子
     78             function createCell(left, top, link, imgUrl, imgHeight, title) {
     79                 var cssText = 'position:absolute;left:' + left + 'px;top:' + top + 'px';
     80                 var innHTML = '<a href="' + link + '" target="_blank"><img src="' + imgUrl + '" alt="' + title + '" height="' + imgHeight + 'px"><p class="title">' + title + '</p></a>';
     81                 var div = document.createElement('div');
     82                 div.className = 'cell';
     83                 div.style.cssText = cssText;
     84                 div.innerHTML = innHTML;
     85                 return div;
     86             }
     87             //插入数据
     88             function insert(data) {
     89                 var fragElement = document.createDocumentFragment();
     90                 if (data.length > 0) {
     91                     for (var i = 0, n = data.length; i < n; i++) {
     92                         var cell = createCell(-9999, -9999, data[i].link, data[i].imgUrl, data[i].height, data[i].title);
     93                         fragElement.appendChild(cell);
     94                         cells.push(cell);
     95                     }
     96                     owarp.appendChild(fragElement);
     97                 }
     98                 //插入后再排列
     99                 sort();
    100             }
    101             //排列
    102             function sort() {
    103                 var num = getColumnNum(), left, top, column;
    104                 //nowNum的作用是不让已经加载的数据重新计算定位排列
    105                 for (var j = nowNum, k = cells.length; j < k; j++, nowNum++) {
    106                     top = 0;
    107                     if (j == 0) {
    108                         init();
    109                     }
    110                     column = getMinKey(lenArr);
    111                     if (j < num) {
    112                         //第一行列top的值为0
    113                         cells[j].style.top = '0px';
    114                         
    115                     }
    116                     else {
    117                         top = lenArr[column] + columnMarginLeft;
    118                         cells[j].style.top = top + 'px';
    119                     }
    120                     lenArr[column] = top + cells[j].offsetHeight;
    121                     left = column * (cellClientWidth + columnMarginLeft);
    122                     cells[j].style.left = left + 'px';
    123                 }
    124             }
    125             //重新排列
    126             function resort() {
    127                 //设置nowNum=0即可重排
    128                 nowNum = 0;
    129                 //重新排序
    130                 sort();
    131             }
    132 
    133             return {
    134                 insert: insert,
    135                 resort: resort
    136             }
    137 
    138         }
    139 
    140         //判断是否浏览器底部
    141         function isFloor() {
    142             //
    143             var height = document.documentElement.scrollHeight || document.body.scrollHeight;
    144             // 获取页面卷去的高度
    145             var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    146             // 获取页面可视区域宽度
    147             var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    148             if (scrollTop + clientHeight > height - 50) {
    149                 return true;
    150             }
    151             return false;
    152         }
    153 
    154         $(function() {
    155             var myWaterFull = waterFull({ id: 'warp' });
    156             myWaterFull.insert(data);
    157             var re;
    158             $(window).scroll(function() {
    159                 if (isFloor()) {
    160                     myWaterFull.insert(data);
    161                 }
    162             });
    163             $(window).resize(function() {
    164                 clearTimeout(re);
    165                 re = setTimeout(function() { myWaterFull.resort(); }, 200);
    166             });
    167         });
    168 
    169     </script>
    170 
    171 </head>
    172 <body>
    173     <form id="form1" runat="server">
    174     <div id="warp">
    175     </div>
    176     </form>
    177 </body>
    178 </html>
    View Code

    理想中的生活是:醒醒,下班了!而现实中是 :还不起来,上班迟到了!!多么痛的领悟

  • 相关阅读:
    Java如何编写自动售票机程序
    install windows service
    redis SERVER INSTALL WINDOWS SERVICE
    上传文件
    This problem will occur when running in 64 bit mode with the 32 bit Oracle client components installed.
    解决Uploadify上传控件加载导致的GET 404 Not Found问题
    OracleServiceORCL服务不见了怎么办
    Access to the temp directory is denied. Identity 'NT AUTHORITYNETWORK SERVICE' under which XmlSerializer is running does not have sufficient permiss
    MSSQL Server 2008 数据库安装失败
    数据库数据导出成XML文件
  • 原文地址:https://www.cnblogs.com/jiaxa/p/3170079.html
Copyright © 2011-2022 走看看