HTML5+CSS3+JavaScript Web前端开发案例教程课件：商品列表布局.pptxVIP

商品列表布局

案例介绍技术准备案例实现010203

01案例介绍

案例介绍案例名称：商品列表布局核心功能：瀑布流布局图片列表无限加载

案例介绍无限加载瀑布流布局

02技术准备

技术准备jQuery-Waterfall.js无限加载插件waterfall是一款响应式无限动态加载图片瀑布流特效jQuery插件。waterfall瀑布流特效使用ajax调用来动态加载图片，达到无限加载的效果。GitHub地址：

技术准备使用方法：使用waterfall.js无限加载瀑布流插件需要引入jQu和jqu文件。scriptsrc=js/jquery-1.11.1/scriptscriptsrc=js/jqu/script

技术准备waterfall.js瀑布流特效的HTML结个使用一个div来包裹图片，然后在外围使用一个div作为包裹容器。divid=demodivclass=boximgsrc=img/01.jpgalt=/divdivclass=boximgsrc=img/02.jpgalt=/divdivclass=boximgsrc=img/03.jpgalt=/div.../div

技术准备waterfall.js官方DEMO中给出了这个瀑布流的基本样式，开发者可以自行修改为需要的瀑布流样式。#demo{margin:auto;position:relative;}.box{float:left;padding:10px;border:1pxsolid#ccc;background:#f7f7f7;box-shadow:008px#ccc;}.box:hover{box-shadow:0010px#999;}.boximg{width:200px;}

技术准备waterfall.js配置参数：参数默认值描述itemClasswaterfall-item图片网格元素的class名称spacingWidth10图片网格元素的水平间距spacingHeight10图片网格元素的垂直间距minColCount2瀑布流布局的最小列数resizeablefalse是否在浏览器窗口缩放时触发positionAll()方法itemAligncenter图片网格元素的对齐方式，可选：center|leftisFadeIntrue是否在加载图片时使用淡入淡出效果ajaxCallbacknullajax回调函数，有2个可用参数：success,end

03案例实现

案例实现文件结构：