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

  • 0
  • 0
  • 约1.2千字
  • 约 14页
  • 2026-02-11 发布于山东
  • 举报

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

商品列表布局

案例介绍技术准备案例实现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案例实现

案例实现文件结构:

您可能关注的文档

文档评论(0)

1亿VIP精品文档

相关文档