所有分类
  • 所有分类
  • 最新发布
  • WordPress主题
  • WordPress插件
  • WordPress汉化
  • HTML5/模板
  • Code/特效
  • 瀑布流
  • 导航菜单

jQuery轻量级网格布局瀑布流布局-Pinto

Pinto是一款轻量级、响应式和可定制的图片网格布局jQuery瀑布流插件。该图片网格布局的特点是使用简单,而且插件本身属于轻量级的,压缩版本小于1kb。该图片网格布局的效果类似于pinterest网站的瀑布流布局,在屏幕缩放时使用CSS3 过渡来制作图片的移动效果。它的特点还有:轻量级:压缩版本小于1kb支持自动缩放
响应式:宽度使用流式布局
动画效果:缩放屏幕时使用CSS3过渡制作图片移动效果

HTML 结构:

<div id="container">
    <!-- These are our grid blocks -->
    <div><img src="images/01.jpg"><h3>Agfa</h3></div>
    <div><img src="images/02.jpg"><h3>Auto</h3></div>
    ...
</div>

初始化插件:

Pinto.js的特点是使用简单,在页面加载完毕之后,可以使用下面的方法来初始化该图片网格布局插件。

<script src="js/pinto.js" type="text/javascript"></script>
<script type="text/javascript">
    $('#container').pinto();
</script>

你也可以通过一些参数来定制该图片网格布局插件。

<script type="text/javascript">
    $('#container').pinto({
        itemSelector: '.block',
        itemWidth: 200,         
        marginX: 10,                
        marginY: 10,                
        align: 'center',                
        fitWidth: false,                
        animate: true,               
        autoResize: true,           
        resizeDelay: 50
    });
</script>

配置参数:

参数默认值描述
itemSelector‘< div’块级元素的标识符
itemWidth220网格元素的宽度,单位像素
marginX10两个网格之间的水平间距
marginY10两个网格之间的垂直间距
align‘left’网格的对齐方式:’left’, ‘right’ 或 ‘center’
fitWidthtrue根据容器的尺寸来调整网格的宽度,以创建最优的布局效果
animatetrue在更新网格布局是使用使用 CSS 动画效果
autoResizetrue在浏览器尺寸改变的时候是否更新网格布局
resizeDelay50浏览器尺寸改变和网格布局更新之间的延迟,单位毫秒

原文链接:https://www.7zt.cn/199.html,转载请注明出处~~~

0
广告位招租

评论0

请先

疫情期间优惠活动!本站包年VIP,特惠价:58元;本站终身VIP,特惠价:88元。随着资源不断增多,随时提价!立即查看
显示验证码
没有账号? 注册  忘记密码?

社交账号快速登录