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的更多相关文章

  1. jquery.sortable.js源代码解读

    /* * HTML5 Sortable jQuery Plugin * http://farhadi.ir/projects/html5sortable * * Copyright 2012, Ali ...

  2. jquery sortable的拖动方法内容说明和示例详解(转载http://www.jb51.net/article/45803.htm)

     所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 u ...

  3. jquery sortable的拖动方法示例详解1

    转自:https://www.jb51.net/article/45803.htm 所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper ...

  4. jquery sortable的拖动方法示例详解

    转自:https://hb-keepmoving.iteye.com/blog/1154618 所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象   u ...

  5. 10+ 最流行的 jQuery Tree 菜单插件

    jstree – jQuery Tree Plugin With HTML & JSON Data jstree is a lightweight and flexible jQuery pl ...

  6. 用最基本的EF+MVC+JQ+AJAX+bootstrap实现权限管理的简单实例 之登陆和操作权限

    先来一堆关于上篇文章的废话(不喜者点此隐藏) 今天把博客加了个小功能,就是点标题可以隐藏或展示相关内容,做法很傻,就是引用了bootstrap的两个css类和全部的js文件,其实这样的小功能完全应该自 ...

  7. 黄聪: 50 个 Bootstrap 插件

    Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. 本文向你 ...

  8. 为你下一个项目准备的 50 个 Bootstrap 插件

    Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. 本文向你 ...

  9. jsp 路径问题

    <script   type="text/javascript"   src="<%=ApplicationContextUtil.getBasePath(r ...

随机推荐

  1. 网站压力测试工具之WebBench

    1 Web Bench简介 WebBench是有名的网站压力测试工具,由Lionbridge公司开发,最多可以模拟3万个并发连接去测试网站的负载能力. Webbech能测试处在相同硬件上,不同服务的性 ...

  2. web测试 结果存储类型为“Database”,但尚未指定结果储存库连接字符串

    vs2010 Ultimate版带有web测试功能,可以对网站的性能以及负载进行测试. 在进行负载测试时提示“异常 LoadTestConnectStringMissingException 1 Lo ...

  3. Apache中RewriteCond规则参数介绍(转)

    CodeIgniter2.0已经出来有20多天了呢~也就是我一直用的php框架(CI).一直都在研究jquery,倒是把CI给忘到一边去了,呵呵~~今天公司事情不是很多,于是开始熟悉一下CI2.0的一 ...

  4. 转:JavaScript定时机制、以及浏览器渲染机制 浅谈

    昨晚,朋友拿了一道题问我: a.onclick = function(){ setTimeout(function() { //do something ... },0); }; //~~~ 我只知道 ...

  5. js 选择器

    a>b  获取a下面的直接子元素

  6. 修改MojoWeixin 只保留用户name 取消群昵称

    <pre name="code" class="python"> if($msg->type eq "friend_message& ...

  7. AnyEvent::HTTP 介绍

    AnyEvent::HTTP - simple but non-blocking HTTP/HTTPS client 一个简单的非堵塞的 HTTP/HTTPS 客户端: use AnyEvent::H ...

  8. 基于visual Studio2013解决C语言竞赛题之0205位数求和

     题目

  9. 基于visual Studio2013解决C语言竞赛题之0202坐标转换

    题目

  10. 学校作业-Usaco DP水题

    好吧,因为USACO挂掉了,所以我写的所有代码都不保证正确性[好的,这么简单的题,再不写对,你就可以滚粗了! 第一题是USACO 2.2.2 ★Subset Sums 集合  对于从 1 到 N 的连 ...