伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】

所属分类:UI-布局,滚动,图片展示
 2835  27  查看评论 (2)
伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】 ie兼容8
Lightbox(图片放大)详细文档可参照:http://www.jquerylightbox.com/Waterfall(自适应瀑布流)jq-waterfall是一款仿Pinterest网站的响应式无限动态加载图片瀑布流手机1946韦德最新网站jQuery伟德BETVICTOR。该瀑布流手机1946韦德最新网站使用ajax调用来动态加载图片,达到无限加载的效果。它使用简单,兼容性好,值得推荐!

使用方法

使用这个瀑布流伟德BETVICTOR需要引入jQuery和jquery.waterfall.js文件。<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"> </script> <script src="js/jquery.waterfall.js"></script>HTML结构该瀑布流手机1946韦德最新网站的HTML结个使用一个<div>来包裹图片,然后在外围使用一个<div>作为包裹容器。<div id="div1">     <a href="http://yzshield.com/quot;images/01.jpg" title="测试图片">"         <div class="box"><img src="images/01.jpg" alt=""></div>     </a>     <a href="http://yzshield.com/quot;images/02.jpg" title="测试图片">"         <div class="box"><img src="images/02.jpg" alt=""></div>     </a> ... </div>CSS样式DEMO中给出了这个瀑布流的基本样式,你可以自行修改为你需要的瀑布流样式。#div1 { margin: auto; position: relative; } .box { float: left; padding: 10px; border: 1px solid #ccc; background: #f7f7f7; box-shadow: 0 0 8px #ccc; } .box:hover { box-shadow: 0 0 10px #999; } .box img { width: 240px; }

调用伟德BETVICTOR

伟德BETVICTOR使用Javascript来生成Pinterest样式的网格瀑布流布局。使用ajaxCallback来在页面向下滚动的时候对图片进行动态加载,以达到无限瀑布流的效果。$("#div1").waterfall({     itemClass: ".box",     minColCount: 2,     spacingHeight: 10,     resizeable: true,     ajaxCallback: function(success, end) {      var data = {"data": [             { "src": "images/01.jpg" }, { "src": "images/02.jpg" }, { "src": "images/03.jpg" }, { "src": "images/04.jpg" }, { "src": "images/05.jpg" }, { "src": "images/06.jpg" }, { "src": "images/07.jpg" }, { "src": "images/08.jpg" }         ]};         console.log(data)         var str = "";             for (var i = 0; i < data.data.length; i++) {                 str += '<a href="http://yzshield.com/quot;' + data.data[i].src + '" title="测试图片"><div class="box"><img src="' + data.data[i].src + '" alt=""></div></a>'"                 }             jQuery(str).appendTo(jQuery("#div1"));             jQuery('#div1 a').lightBox();//这里再次调用图片放大方法         success();         end();     } });

配置参数

下面是该瀑布流手机1946韦德最新网站的可用参数。
参数            默认值描述
itemClass            "waterfall-item"图片网格元素的class名称
spacingWidth            10图片网格元素的水平间距
spacingHeight            10图片网格元素的垂直间距
minColCount            2瀑布流布局的最小列数
resizeable            false            是否在浏览器窗口缩放时触发positionAll()方法
itemAlign            "center"图片网格元素的对齐方式,可选:center|left
isFadeIn            true            是否在加载图片时使用淡入淡出效果
ajaxCallback            nullajax回调函数,有2个可用参数:success, end
相关伟德BETVICTOR-布局,滚动,图片展示

jQuery css3动画响应式网站模板

紫色背景大气css3动画响应式网站模板
  布局
 7154  67

简单大气有创意html5模板 comingsoon

即将上线_简单大气有创意的html5模板
  布局
 14330  381

Gallerybox-全屏响应式jQuery图片画廊伟德BETVICTOR

瀑布流加全屏响应式jQuery图片画廊伟德BETVICTOR
  布局
 10174  95

响应式教育培训机构HTML5模板

本模板是一个多页和多用途HTML模板适合学校、教育学校、幼儿园、小学、中学、大学、学术和教育。
  布局
 16897  236

讨论这个项目(2)回答他人问题或分享伟德BETVICTOR使用方法奖励jQ币

    网站建设推广-壹起航阿凯 0
    2018/1/31 9:14:40
    屏幕缩放到手机端的时候九比较尴尬了。。。
        山/xs魂0
        2018/1/31 9:45:56
        瀑布流手机端是可以自适应的,图片放大在手机端可以设置图片的最大宽度。
    回复
取消回复