zoukankan      html  css  js  c++  java
  • 瀑布流原理

    瀑布流效果分为两类:蘑菇街效果(第一种:固定列数)、百度图片/花瓣网(第二种:随着窗口的大小列数发生变化 )

    涉及到的问题:

    1.数据问题(应用的技术:ajax/jsonp)

    2.数据加载之后如何显示在页面上 ,展现出效果。

    第一种:蘑菇街式的固定列数

    原理:

    一个ul,如果有四列,就是有四个li(浮动定位,宽度提前定义,但是高度没有定义),如果一次性的加载10条数据,那么一次从左到右填充li,填充一屏之后再加载,就寻找最小列填充。

    第二种:百度图片、花瓣网(随窗口大小列数发生变化)

    原理:

    页面中包含一个容器(设置成固定定位),然后所有的图片都放在这个容器里面。在图片进行显示的时候,是我们要先计算出总的列数,然后根据列数跟每列的宽度计算出容器的总宽度。显示图片的时候就是从左往右填充各列,当一屏填充满了之后,就会寻找最短列,然后
    把图片添加到最短列中。

  • 相关阅读:
    设计模式—享元模式
    设计模式—观察者模式
    设计模式—桥接模式
    设计模式—代理模式
    设计模式—装饰模式
    设计模式—单例模式
    设计模式—建造者模式
    设计模式—简单工厂
    源码解读—HashTable
    源码解读—HashMap
  • 原文地址:https://www.cnblogs.com/zcynine/p/5534970.html
Copyright © 2011-2022 走看看