zoukankan      html  css  js  c++  java
  • 瀑布流研究

    0.前言

       以前看过瀑布流,但是没有自己动手写代码,最近偶然又看到了,那索性就自己动手写写代码。

       瀑布流的实现方式大致上有三种:固定列数的浮动布局、自适应的绝对定位布局、css3的多列布局,下面就分别描述。

    1.固定列数的浮动布局

      该方法比较简单:计算出高度最小的那一列,然后

    2.绝对定位

      思考:1.计算可以当前页面的列数;

        2.用一个数组记录各个列的高度;

        3.把新的数据添加到最短列上,然后更新类的高度。

       遇到的问题:

       1.页面的性能问题:当缩放浏览器窗口时会不断触发resize事件,如果每次都相应的话,会很耗性能,因此需要缩放动作结束后再执行重排方法。使用setTimeout和clearTimeout来实现。

        2.获取图片高度,通过服务器获取,也可以通过请求头来获取。

        3.排序问题,通过使用一个数组来保存新添加的数据,只对新添加的数据进行排序 

    参考: 参考1   参考2  参考3  参考4  参考5

  • 相关阅读:
    JavaScript-年月日转换12小时制
    Javascript-双色球
    Javascript-for循环案例-打印1-100之间所有的数字
    HDU4240_Route Redundancy
    HDU2883_kebab
    POJ3041_Asteroids
    HDU3829_Cat VS Dog
    BZOJ2806_Cheat
    HDU4641_K-string
    CF271D_Good Substrings
  • 原文地址:https://www.cnblogs.com/shamoguying1140/p/3225641.html
Copyright © 2011-2022 走看看