1. function goMasonry() {
  2. // if ($container.data('masonry') != undefined) {
  3. $container.isotope('destroy');
  4. }
  5. $container.isotope({
  6. itemSelector: '.element',
  7. // transformsEnabled: false,
  8. animationEngine: 'jquery',
  9. animationOptions: {
  10. duration: 750,
  11. easing: 'swing',
  12. queue: true
  13. },
  14. masonry: {
  15. columnWidth: columnWidthT,
  16. gutterWidth: gutterWidthT,
  17. cornerStampSelector: '.corner-stamp'
  18. }
  19. }, myCallBack);
  20. }

isotope方法

  1. $('#container').sortable({
  2. placeholder: {
  3. element: function (currentItem) {
  4. 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];
  5. },
  6. update: function (container, p) {
  7. return;
  8. }
  9. },
  10. tolerance: function (currentItem) {
  11. return 'pointer';
  12. },
  13. items: 'li',
  14. opacity: 0.6,
  15.  
  16. helper: function (event, element) {
  17. var clone = $(element).clone();
  18. clone.removeClass('isotope-item');
  19. clone.removeClass('element');
  20. element.removeClass('isotope-item');
  21. element.removeClass('element');
  22. return clone;
  23. },
  24. stop: function (event, ui) {
  25. ui.item.addClass("isotope-item");
  26. ui.item.addClass("element");
  27. goMasonry();
  28.  
  29. },
  30. change: function () {
  31.  
  32. },
  33. sort: function () {
  34. goMasonry();
  35.  
  36. }
  37. });

sortable方法

  1. <ul id="container">
  2. <li class="thumb element"></li>
  3. <li class="thumb element"></li>
  4. <li class="thumb element"></li>
  5. <li class="thumb element"></li>
  6. </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. poj 3252

    http://poj.org/problem?id=3252//自己搞了很长时间...现在刚刚有点明白.. 1 #include <iostream> using namespace st ...

  2. delphi数字签名验证及能够获取数字签名文件信息(利用wintrust.dll的导出函数,翻译一下)

    unit TrustCheck; interface uses Windows,SysUtils,jwaWinTrust,JwaWinCrypt; function CheckFileTrust(co ...

  3. ArcEngine 图层无闪烁刷新

    使用AE的同行经常会遇到这样的问题,图层刷新.目前常用的有以下几种方法: 1.完全刷新 MapControl.Refresh(); 2.局部刷新 MapControl.Refresh(esriView ...

  4. 高质量程序设计指南C/C++语言——C++/C程序设计入门(3)

  5. WEB开发:如何用js来模拟服务器的ajax响应,不依赖服务器来编写前端代码

    一.问题的提出 目前web前端开发,主流的思路是: 1)编写静态的html文件(不使用模板技术,与服务器无关) 2)页面通过ajax与服务器交互,进行数据的传输,数据格式为json格式 这里存在一个问 ...

  6. 网站开启gzip的方法

    .如果空间支持Zlib压缩文件,可用php.ini方法 这个方法比较简单,压缩率也较高,可达75%左右.新建一个名为 php.ini 的文件,添加以下代码,保存后上传至网站根目录即可. output_ ...

  7. [置顶] Android4.x对长按电源键(挂断键)和短按电源键(挂断键)的详细处理流程

    1. 简介 Android4.x在Framework的PhoneWindowManager对Power(KeyEvent.KEYCODE_POWER)和Home(KeyEvent.KEYCODE_HO ...

  8. zabbix 添加主机成功失败判断

    zabbix 成功添加后: $VAR1 = bless( { 'version' => 0, 'content' => { 'jsonrpc' => '2.0', 'id' => ...

  9. hdu 1251 统计难题 初识map

    Problem Description Ignatius近期遇到一个难题,老师交给他非常多单词(仅仅有小写字母组成,不会有反复的单词出现),如今老师要他统计出以某个字符串为前缀的单词数量(单词本身也是 ...

  10. mongoose 数据库操作 - 分页

    使用mongoose 加入分页方法,临时还没发现什么更好的方法,我使用的方法是,直接在源代码中加入 找到 node_modules/mongoose/lib/model.js打开这个文件.里面加入这段 ...