瀑布流
Posted tianya-guoke
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了瀑布流相关的知识,希望对你有一定的参考价值。
php中图片资源路径
结构是ul包裹四个li,每个li中div包裹img和p
li中div的class类名为item
样式:
用jquery中的ajax实现
实现loading效果:
loading样式:
首先用jquery中的ajax获取数据:
获取到的数据是string形式,转换成json形式 —> JSON.parse
请求完成后要向页面中添加dom结构,所以封装一个addDom函数
数据请求成功之前loading需展示出来
请求回来后loading消失
创建dom结构:
拿到最短的那列图片,只需拿到那列的索引值
先把li元素取出来
默认最短的是第一列,和后面的依次做比较,取出最短的
addDom函数中:向最短的列数添加内容
添加cpage值
监听滚动条事件,
下次发送请求时num++
加锁,避免重复请求
在addDom中再变false
以上是关于瀑布流的主要内容,如果未能解决你的问题,请参考以下文章