首页 > 代码库 > isotope/masonry 使用jQuery.sortable
isotope/masonry 使用jQuery.sortable
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: true13 },14 masonry: {15 columnWidth: columnWidthT,16 gutterWidth: gutterWidthT,17 cornerStampSelector: ‘.corner-stamp‘18 }19 }, myCallBack);20 }
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 });
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>7
http://api.jqueryui.com/sortable/
http://masonry.desandro.com/
http://isotope.metafizzy.co/docs/introduction.html
实例 http://tyler-designs.com/masonry-ui/
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。