Javascript+Ajax实现图片瀑布流布局

阅读() @2018-01-07 22:20:13

很多图片类型的网站,比如:瑞丽女性网、土巴兔装修网、聚美优品等,这种技术一般是用在产品栏目页或者是首页以产品图片为主的页面中,下面是我在本地环境测试的Javascript+Ajax实现图片瀑布流布局,仅供参考!

实现原理:

随着页面不断的向上滚动,当body距离浏览器顶部的高度小于浏览器的高度的时候,通过ajax交互后台数据,将图片信息展现在前端。

需要注意的SEO问题:

因为在页面滚动的过程中,图片是通过javascript加载进来的,所以,在实际的前端代码中并没有相应的html代码,如果网上是需要做SEO优化的,那就需要预先在页面中填充部分HTML代码,否则搜索引擎是不能识别javascript加载的内容,认为这个页面是一个空页面,想要实现排名几乎不可能!

效果演示 源码下载
加入QQ群,在群文件中免费下载源码提取密码!
微信二维码