isotope/masonry 使用jQuery.sortable
- function goMasonry() {
- // if ($container.data('masonry') != undefined) {
- $container.isotope('destroy');
- }
- $container.isotope({
- itemSelector: '.element',
- // transformsEnabled: false,
- animationEngine: 'jquery',
- animationOptions: {
- duration: 750,
- easing: 'swing',
- queue: true
- },
- masonry: {
- columnWidth: columnWidthT,
- gutterWidth: gutterWidthT,
- cornerStampSelector: '.corner-stamp'
- }
- }, myCallBack);
- }
isotope方法
- $('#container').sortable({
- placeholder: {
- element: function (currentItem) {
- return $("<li class='thumb element isotope-item rqq' style='margin: 1px; height: " + (currentItem.height() - 4) + "px; width: " + (currentItem.width() - 4) + "px; vertical-align: middle; text-align: center; outline: none; border: 1px dashed black; background-color: #97dd52;'></li>")[0];
- },
- update: function (container, p) {
- return;
- }
- },
- tolerance: function (currentItem) {
- return 'pointer';
- },
- items: 'li',
- opacity: 0.6,
- helper: function (event, element) {
- var clone = $(element).clone();
- clone.removeClass('isotope-item');
- clone.removeClass('element');
- element.removeClass('isotope-item');
- element.removeClass('element');
- return clone;
- },
- stop: function (event, ui) {
- ui.item.addClass("isotope-item");
- ui.item.addClass("element");
- goMasonry();
- },
- change: function () {
- },
- sort: function () {
- goMasonry();
- }
- });
sortable方法
- <ul id="container">
- <li class="thumb element"></li>
- <li class="thumb element"></li>
- <li class="thumb element"></li>
- <li class="thumb element"></li>
- </ul>
Html 格式
http://api.jqueryui.com/sortable/
http://masonry.desandro.com/
http://isotope.metafizzy.co/docs/introduction.html
实例 http://tyler-designs.com/masonry-ui/
isotope/masonry 使用jQuery.sortable的更多相关文章
- jquery.sortable.js源代码解读
/* * HTML5 Sortable jQuery Plugin * http://farhadi.ir/projects/html5sortable * * Copyright 2012, Ali ...
- jquery sortable的拖动方法内容说明和示例详解(转载http://www.jb51.net/article/45803.htm)
所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 u ...
- jquery sortable的拖动方法示例详解1
转自:https://www.jb51.net/article/45803.htm 所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper ...
- jquery sortable的拖动方法示例详解
转自:https://hb-keepmoving.iteye.com/blog/1154618 所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 u ...
- 10+ 最流行的 jQuery Tree 菜单插件
jstree – jQuery Tree Plugin With HTML & JSON Data jstree is a lightweight and flexible jQuery pl ...
- 用最基本的EF+MVC+JQ+AJAX+bootstrap实现权限管理的简单实例 之登陆和操作权限
先来一堆关于上篇文章的废话(不喜者点此隐藏) 今天把博客加了个小功能,就是点标题可以隐藏或展示相关内容,做法很傻,就是引用了bootstrap的两个css类和全部的js文件,其实这样的小功能完全应该自 ...
- 黄聪: 50 个 Bootstrap 插件
Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. 本文向你 ...
- 为你下一个项目准备的 50 个 Bootstrap 插件
Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. 本文向你 ...
- jsp 路径问题
<script type="text/javascript" src="<%=ApplicationContextUtil.getBasePath(r ...
随机推荐
- poj 3252
http://poj.org/problem?id=3252//自己搞了很长时间...现在刚刚有点明白.. 1 #include <iostream> using namespace st ...
- delphi数字签名验证及能够获取数字签名文件信息(利用wintrust.dll的导出函数,翻译一下)
unit TrustCheck; interface uses Windows,SysUtils,jwaWinTrust,JwaWinCrypt; function CheckFileTrust(co ...
- ArcEngine 图层无闪烁刷新
使用AE的同行经常会遇到这样的问题,图层刷新.目前常用的有以下几种方法: 1.完全刷新 MapControl.Refresh(); 2.局部刷新 MapControl.Refresh(esriView ...
- 高质量程序设计指南C/C++语言——C++/C程序设计入门(3)
- WEB开发:如何用js来模拟服务器的ajax响应,不依赖服务器来编写前端代码
一.问题的提出 目前web前端开发,主流的思路是: 1)编写静态的html文件(不使用模板技术,与服务器无关) 2)页面通过ajax与服务器交互,进行数据的传输,数据格式为json格式 这里存在一个问 ...
- 网站开启gzip的方法
.如果空间支持Zlib压缩文件,可用php.ini方法 这个方法比较简单,压缩率也较高,可达75%左右.新建一个名为 php.ini 的文件,添加以下代码,保存后上传至网站根目录即可. output_ ...
- [置顶] Android4.x对长按电源键(挂断键)和短按电源键(挂断键)的详细处理流程
1. 简介 Android4.x在Framework的PhoneWindowManager对Power(KeyEvent.KEYCODE_POWER)和Home(KeyEvent.KEYCODE_HO ...
- zabbix 添加主机成功失败判断
zabbix 成功添加后: $VAR1 = bless( { 'version' => 0, 'content' => { 'jsonrpc' => '2.0', 'id' => ...
- hdu 1251 统计难题 初识map
Problem Description Ignatius近期遇到一个难题,老师交给他非常多单词(仅仅有小写字母组成,不会有反复的单词出现),如今老师要他统计出以某个字符串为前缀的单词数量(单词本身也是 ...
- mongoose 数据库操作 - 分页
使用mongoose 加入分页方法,临时还没发现什么更好的方法,我使用的方法是,直接在源代码中加入 找到 node_modules/mongoose/lib/model.js打开这个文件.里面加入这段 ...