zoukankan      html  css  js  c++  java
  • JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记4

    5.2.2 让瀑布流动起来

    打好基建之后,就须要写JavaScript代码。

    首先假设数据不够显示一屏幕的情况,就用新数据来补足它,在补充的时候是依据4列中最矮的那一个为优先补充,由于高矮尺寸一般仅仅有在client才看得到,服务端尽管也能够计算。可是会非常浪费资源。client的内存和CPU能用则多用,仅仅要不让client变慢即可。

    仅仅要图片高度不一致。通过这种思路非常快就能够看到一个“瀑布流”,这仅仅是静态的,一般滚动的时候瀑布流都会加入数据。所以接下来就是加入滚动事件,仅仅要有滚动就计算然后补充数据。


    先看图5-5的效果。


    在网上收集了一些固定宽度不固定高度的图片,简单设置了一下页面的样式。在实际项目中外观样式设置可能更加复杂一些,本书重点研讨JavaScript。所以还是先看看事实上现代码【范例5-2】。


    35. eg.getDataList = function(min,max){ //模端提供拟构造数据,实际上这些数据由后
    36. var lst = [],n=8; //保存数据
    37. for(var i=0;i<n;i++){ //每次模拟 n 条
    38. var k = min + parseInt(Math.random()*(max-min));//随机指定范围的数
    39. lst.push(k+".jpg"); //拼接成字符串
    40. }
    41. return lst; //返回数组
    42. };
    43. eg.cols = eg.getElementsByClassName("col"); //把目标对象缓存起来
    44. eg.colh = [0,0,0,0]; //存取每列的高度
    45. eg.getColMin = function(){ //计算 4 列高度
    46. var min = 0,m = {};
    47. for(var i=0;i<4;i++){
    48. min = parseInt(eg.cols[i].offsetHeight);
    49. eg.colh[i] = min;
    50. m[min] = i;
    51. }
    52. return eg.cols[m[Math.min.apply(Array,eg.colh)]||0]; //返回最小高度的对象
    53. }
           //追加数据的方法
    54. eg.add = function(dl){
    55. for(var i in dl){
    56. var newDiv = document.createElement("div")
    57. var newImg = document.createElement("img");
    58. newImg.src = dl[i];
    59. newDiv.appendChild(newImg);
    60. newDiv.innerHTML += '<p>['+dl[i]+']</p>';
    61. eg.getColMin().appendChild(newDiv); //追加到最小高度列里
    62. }
    63. };
    64. eg.scroll = function(){ //滚动栏事件处理
    65. window.onscroll = function(){//onscroll,onload,onresize 仅仅能这样加入
    66. var doc = document;
    67. var top = doc.documentElement.scrollTop || doc.body.scrollTop; //滚动栏到顶部的高度
    68. var winH = doc.documentElement.clientHeight||doc.body.clientHeight; //可视窗体的高度
    69.                    if(Math.min.apply(Array,eg.colh) < top+winH){                                    //假设最小高度小于可视区域,就补充
    70. eg.add(eg.getDataList(1,35)); //随机获取数据,并追加到最 后
    71.                    }
    72.           }
    73.   }

    上面代码中的 eg.getElementsByClassName()方法是之前定义过的一个方法。存放在 base.js 文件 中。通过【范例 5-1】可知,默认数据非常少。须要在初始化的时候补充一些,这就要在 HTML 页面
    添加一个 script 标签,先调用 eg.getColMin()获取已经存在的数据高度并保存到 eg.colh 数组中以便
    后面推断使用。然后调用 eg.getDataList()方法模拟一批数据,正规项目中会用 AJAX 去服务端请求, 然后把数据用 eg.add()方法追加到后面。

    最后还要调用一下 eg.scroll()方法绑定滚动栏事件的监听, 增加代码是这种:

    <script>
    eg.getColMin();	//计算第一批数据的高度
    var dl = eg.getDataList(5,35);              //初始化一些数据 
    eg.add(dl);                                 //补充剩下的数据 
    eg.scroll();                               //启动滚动栏监听
    </script>


    注意:因为真实项目中。window.onscroll 事件可能会绑定多个业务,所以本例中的直接覆盖绑 定方式不宜直接拉入项目中去。要确保没有其它业务占用的情况下方可如此。否则可能会出现一些 意外情况,比方无法运行、某些事件被覆盖等等。
    图片和文件放置在同一个文件夹,否则请改动对应的路径。

    当可以用鼠标怎么也滚不究竟的时候,
    恭喜你已实现经典的固定列宽瀑布流!

    最具士兵袭击实战类型的JavaScript


  • 相关阅读:
    LeetCode "Median of Two Sorted Arrays"
    LeetCode "Distinct Subsequences"
    LeetCode "Permutation Sequence"

    LeetCode "Linked List Cycle II"
    LeetCode "Best Time to Buy and Sell Stock III"
    LeetCode "4Sum"
    LeetCode "3Sum closest"
    LeetCode "3Sum"
    LeetCode "Container With Most Water"
  • 原文地址:https://www.cnblogs.com/mengfanrong/p/5130446.html
Copyright © 2011-2022 走看看