首页 > 代码库 > 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             }
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>7            
Html 格式

http://api.jqueryui.com/sortable/

http://masonry.desandro.com/

http://isotope.metafizzy.co/docs/introduction.html

实例  http://tyler-designs.com/masonry-ui/