isotope + imageLoaded
来源:互联网 发布:淘宝网二手苹果手机 编辑:程序博客网 时间:2024/06/06 01:05
imageLoaded
imagesLoaded是一款用于检测页面中的图片是否被加载的js插件。imagesLoaded是非常有用的插件,当你的页面中某幅图片没有被加载时,默认会显示一个红叉或图片alt文本,imagesLoaded可以将未加载的图片替换为你设置的图片。官网在这里。
引入:
<script src="http://cdn.bootcss.com/jquery.imagesloaded/4.1.3/imagesloaded.min.js"></script>
使用:
可以直接使用一个回调函数
$('#container').imagesLoaded( function() { // images have loaded});
也可以预定义的方法来根据不同的图片加载情况执行回调函数:
$('#container').imagesLoaded() .always( function( instance ) { console.log('all images loaded'); }) .done( function( instance ) { console.log('all images successfully loaded'); }) .fail( function() { console.log('all images loaded, at least one is broken'); }) .progress( function( instance, image ) { var result = image.isLoaded ? 'loaded' : 'broken'; console.log( 'image is ' + result + ' for ' + image.img.src ); });
过多内容参考这里。
Isotope
Isotope是一款效果非常神奇的元素分类过滤和排序布局jQuery插件。Isotope是Masonry布局的作者David DeSandro的一款力作,该分类过滤和排序插件允许你以非常简单和炫酷的方式来隐藏和显示元素,以及对元素按照指定的规则进行排序。官网在这里。
如果在items中使用图片,而图片加载错误时Isotope的布局会发生错乱。解决这个问题的方法时使用imagesLoaded。imagesLoaded可以在所有的图片都被加载之后触发一个回调函数。
<script src="http://cdn.bootcss.com/jquery.isotope/3.0.4/isotope.pkgd.min.js"></script><script src="http://cdn.bootcss.com/jquery.imagesloaded/4.1.3/imagesloaded.min.js"></script>
使用:
// 案例图片初始化加载 items.imagesLoaded(function () { items.isotope({ itemSelector: '.item', layoutMode: 'fitRows', transitionDuration: '0.7s', filter: '.init', sortBy : 'original-order' }); });
其中itemSelector为被挑选的排列的项目, 执行isotope方法的则是mSelector的父容器
对内容进行挑选排序时用到的是filter, 后面是要挑选显示的class,可以使用自定义属性来对对应class,例如
<ul id='items-nav' class="items-nav col-sm-12 col-xs-6"> <li class="all active" data-filter="item"><span>所有案例</span></li> <li class="product" data-filter="product"><span>产品设计</span></li> <li class="brand" data-filter="brand"><span>品牌形象</span></li> <li class="cooperate" data-filter="cooperate"><span>合作开发</span></li></ul>
点击对应的li导航时执行下面的代码:
items.isotope({ filter: '.init', sortBy : 'original-order'});
还可以对项目筛选的同时进行排序,上面按照html排列顺序进行排序,也可以选择随机顺序或者指定的值进行排序,具体用法参考官网的说明。
更多内容也可以参考这里。
阅读全文
0 0
- isotope + imageLoaded
- isotope自动布局
- Isotope排序过滤插件小记
- jQuery插件——Isotope
- jQuery网页布局插件Masonry和Isotope
- 响应式布局插:isotope和masonary
- isotope神奇的动态布局库
- GBin1推荐:一个jQuery的超级魔术布局插件 - Isotope
- HTML5应用开发:神奇的动态布局库isotope教程
- HTML5应用开发:神奇的动态布局库isotope教程
- jQuery分类过滤和排序布局插件-Isotope
- 基于 infinitescroll、isotope、imagesLoaded 的瀑布流网站
- 第2章 装配Bean---笔记1
- Android Activity生命周期图解及常见问题汇总
- 自定义Toast提示框 → AppToastMgr
- ./configure,make,make install的作用
- Starting MySQL as a Windows Service
- isotope + imageLoaded
- PHP学习笔记——超全局数组介绍(下)
- 习题8.10
- 中位数(C语言)
- 日历插件(项目总结)(包括mobiscroll.js LCalendar 和Calendar这三个日历插件)
- C# 操作Entities Framework进行增删该查
- 配置java环境变量
- TCP/IP协议概述
- 什么是工业机器人的TCP