• 瀑布流原理


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

    涉及到的问题:

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

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

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

    原理:

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

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

    原理:

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

  • 相关阅读:
    2020软件工程作业04
    2020软件工程作业02
    第一周作业
    2019春总结作业
    12周作业
    第十一周作业
    第十周阅读
    第9周编程总结
    编程总结模版
    第8周编程总结
  • 原文地址:https://www.cnblogs.com/zcynine/p/5534970.html
Copyright © 2020-2023  润新知