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 }
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/