Js利用AJAX实现瀑布流

瀑布流

  • 瀑布流这个效果以前很流行,常见于图片站,电商站或者艺术类网站
  • 比如最早的蘑菇街,蘑菇街最早的定位模式在于"逛"这个含义,增加页面的PV值
  • 现在基本上艺术类网站或者图片站用的比较多。主要还是利用AJAX
  • 当用户滚动到页面的底部以后,它会接收数据,然后创建节点
  • 具体见下图(具体看右边滚动条)
1213.gif

瀑布流原理

  • 瀑布流必须要放到模拟服务器端执行,纯静态无法测试!

  • 瀑布流充分利用了AJAX特性,AJAX是它的核心
  • 瀑布流是宽度一样,但是高度不一样.
  • 其次最重要的就是找到最短的那个列
  • 我这个效果是列规定死了就4列,
  • 有的可以随着浏览器的变化而改变列数
  • 最重要的还是对数据的处理

代码

  • 代码我封装好了。改改CSS数值还有宽度即可。
  • 注释全,简单明了



    
    
    封装瀑布流
    



以上瀑布流结束

代码地址请点击GitHub地址

你可能感兴趣的:(Js利用AJAX实现瀑布流)