瀑布流

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

技术图片

 

以上是关于瀑布流的主要内容,如果未能解决你的问题,请参考以下文章

瀑布流实现思路

Dreamweaver 怎么实现瀑布流

css瀑布流间距不对

Android实现自动滚动的瀑布流?怎么实现

分享:纯 css 瀑布流 和 js 瀑布流

android 瀑布流条目错乱解决方法