jQuery流沙分類

在120張圖片（130x130px）的長面板上使用iosslider來賦予其觸摸滑動。我使用jQuery quicksand來排序4列中的塊集合。因此，我需要克隆它們，提取項目塊，對它們進行排序並將它們重新添加到列（面板）中。jQuery流沙分類

<div id="tiles_viewport"> 
    <div id="mouseSwipeScroll"> 
    <div class="panel"> 
     <div class="item" data-id="1" data-state="1"><img src="xxx" /></div> 
     <div class="item" data-id="2" data-state="1"><img src="xxx" /></div> 
     <div class="item" data-id="3" data-state="1"><img src="xxx" /></div> 
     <div class="item" data-id="4" data-state="0"><img src="xxx" /></div> 
    </div> 
    <div class="panel"> 
     <div class="item" data-id="5" data-state="1"><img src="xxx" /></div> 
     <div class="item" data-id="6" data-state="1"><img src="xxx" /></div> 
     <div class="item" data-id="7" data-state="1"><img src="xxx" /></div> 
     <div class="item" data-id="8" data-state="0"><img src="xxx" /></div> 
    </div> 
    <div class="panel">...

CSS ...

#tiles_viewport { 
    position: relative; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 535px; 
    margin: 5px 0; 
    padding: 0; 
    overflow: hidden; 
    z-index: 10; 
} 

#mouseSwipeScroll { 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    position: relative; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
} 

#mouseSwipeScroll .panel { 
    float: left; 
    margin: 0; 
    padding: 0; 
    width: 130px; 
    height: 535px; 
    overflow: hidden; 
} 

#mouseSwipeScroll .panel .item { 
    position: relative; 
    margin: 0; 
    padding: 0 5px 5px 5px; 
    width: 120px; 
    height: 130px; 
}

的Javascript：

$(function() { 
    sortTiles = function() { 
     var panels = $('.panel'); 
     var items = $(panels).children('.item'); 
     var sortedItems = $(items).clone(); 

     // sort // 
     sortedItems.sort(function(a, b) { 
      return parseInt($(b).data('state')) - parseInt($(a).data('state')); 
     }); 

     // wrap into panels again // 
     $.each(sortedItems, function(i, el) { 
      if(i % 4 == 0) { 
       sortedItems.slice(i , i+4).wrapAll('<div class="panel">'); 
      } 
     }); 

     // animate // 
     $(panels).quicksand(sortedItems, { 
      duration: 800, 
      easing: 'easeInOutQuad' 
     }); 
     } 
}); 

$(document).ready(function() { 

     $('#tiles_viewport').iosSlider({ 
     snapToChildren: true, 
     desktopClickDrag: true, 
     startAtSlide: 4 
     }); 
});

排序不工作，也wrapAll不加封閉面板股利。一直在尋找這個相當長的一段時間，所以對於一些建議會很好。

非常感謝，

搶。

來源

2012-10-27 Rob Curle

代碼中的缺陷是sort()只對jQuery對象進行排序，但它不會更改DOM。以下只是增加了一條線來清空現有的內容並改變wrapAll概念，創建一個新的div，並立即將其插入到DOM

var panels = $('.panel'); 
var items = $(panels).children('.item'); 
var sortedItems = $(items).clone(); // sort // 

$('#content').empty(); 

sortedItems.sort(function(a, b) { 
    return parseInt($(b).data('state')) - parseInt($(a).data('state')); 
}); 

$.each(sortedItems, function(i, el) { 
    if (i % 4 == 0) { 
     $('<div class="panel">').append( sortedItems.slice(i, i + 4)).appendTo('#content') 
    } 
});

DEMO：http://jsfiddle.net/yMtwp/

來源

2012-10-27 22:08:03 charlietfl

感謝您的幫助......您的例子效果很好。 –

如果它幫助...隨時接受anser – charlietfl

我認爲你的問題主要涉及到沙將這些項目排列在幾個面板上，這會導致沙子排序插件不合適。如果你可以沒有面板，我建議你只把它們放到1個面板中，一切都會正常工作。

如果不是，我建議下面的解決方案，在那裏你有一個容器用於所有的面板，對這個超級面板進行沙子排序，然後在沙子排序完成後重新構建面板。我把下面的工作示例：

<html> 
<head> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="https://github.com/razorjack/quicksand/raw/master/jquery.quicksand.js"></script> 
<script type="text/javascript"> 
    function sortTiles() { 
     var superpanel = $('.superpanel'); 
     var items = superpanel.find('.item'); 
     var sortedItems = items.clone(); 

     // sort // 
     sortedItems.sort(function(a, b) { 
      return parseInt($(b).data('state')) - parseInt($(a).data('state')); 
     }); 

     // animate // 
     superpanel.quicksand(sortedItems, { 
      duration: 800 
     }, function() { 
      // wrap into panels again // 
      var items = $('.superpanel .item'); 
      for(i=0; i<items.length; i+=4) { 
       items.slice(i , i+4).wrapAll('<div class="panel">'); 
      } 
     }); 

    } 
    $(function() { 
     sortTiles(); 
    }); 
    </script>  
</head> 
<html> 
<body> 
    <div class="superpanel"> 
     <div class="panel"> 
      <div class="item" data-id="4" data-state="4">Content 4</div> 
      <div class="item" data-id="1" data-state="1">Content 1</div> 
      <div class="item" data-id="3" data-state="3">Content 3</div> 
      <div class="item" data-id="2" data-state="2">Content 2</div> 
     </div> 
     <div class="panel"> 
      <div class="item" data-id="8" data-state="8">Content 8</div> 
      <div class="item" data-id="5" data-state="5">Content 5</div> 
      <div class="item" data-id="7" data-state="7">Content 7</div> 
      <div class="item" data-id="6" data-state="6">Content 6</div> 
     </div> 
    </div> 
</body> 
</html>

編輯

這裏是使列另一項建議，並在同一時間讓他們在一個面板，而不是重新組合這將使動畫醜陋。

<html> 
<head> 
<style> 
    .item { 
     display: inline-block; 
     width: 40%; 
    } 
</style> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="https://github.com/razorjack/quicksand/raw/master/jquery.quicksand.js"></script> 
<script type="text/javascript"> 
    function sortTiles() { 
     var superpanel = $('.superpanel'); 
     var items = superpanel.find('.item'); 
     var sortedItems = items.clone(); 

     // sort // 
     sortedItems.sort(function(a, b) { 
      return parseInt($(b).data('state')) - parseInt($(a).data('state')); 
     }); 

     // animate // 
     superpanel.quicksand(sortedItems, { 
      duration: 800 
     }); 

    } 
    $(function() { 
     window.setTimeout(sortTiles, 1000); 
    }); 
    </script>  
</head> 
<html> 
<body> 
    <div class="superpanel"> 
      <div class="item" data-id="4" data-state="4">Content 4</div> 
      <div class="item" data-id="1" data-state="1">Content 1</div> 
      <div class="item" data-id="3" data-state="3">Content 3</div> 
      <div class="item" data-id="2" data-state="2">Content 2</div> 
      <div class="item" data-id="8" data-state="8">Content 8</div> 
      <div class="item" data-id="5" data-state="5">Content 5</div> 
      <div class="item" data-id="7" data-state="7">Content 7</div> 
      <div class="item" data-id="6" data-state="6">Content 6</div> 
    </div> 
</body> 
</html>

來源

2012-10-27 22:46:44 Hisham

優秀...非常感謝。我還在內容上使用了iosSlider，每個模塊中都有一個圖像......它不能很好地處理它。瀏覽器也不能很好地處理動畫。 –

如果你可以添加更多的細節和代碼，也許我們可以幫助更好 – Hisham

我已經添加了一些更多的細節，我的問題。我發現的主要問題是排序會打破iosslider。瀏覽器也沒有應對動畫......一次移動120張圖片。 dev的網站是http://dev.garvald.sugarshaker.com/ –

jQuery流沙分類

回答

相關問題