在 120 张图片(130x130px)的长面板上,使用iosslider给它触摸滑动滑动。我正在使用jQuery流沙对4列中的块集合进行排序。所以我需要克隆它们,提取项目块,对它们进行排序并将它们重新添加到列(面板)中。
<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 也没有添加封闭面板 div。一直在看这个很长一段时间,所以会很适合一些建议。
非常感谢,
抢。