1
shuffle.js라는 jQuery 플러그인을 사용하려고합니다.이 플러그인은 Isotope와 유사하게 작동해야합니다. 페이지의 div 주위를 뒤섞어 놓을 수 있습니다. 그것은 꽤 깔끔한 효과를냅니다. (http://vestride.github.io/Shuffle/ 참조)jQuery plugin 'jquery.shuffle.js'를 만들 때 문제가 발생했습니다.
정렬 할 수 없습니다. 나는 문서를 공부했고 내가 잘못하고있는 것을 발견 할 수있다. 테스트 페이지 : http://res.providencejournal.com/politics/assets/pages/general-assembly/shuffle.htm
첫 번째 행 위에 드롭 다운 메뉴를 변경하면 정렬이 발생합니다.
<!doctype html>
<head>
<!-- css -->
<style>
body {
font-family:arial;
}
#container {width: 960px; margin: 0 auto;}
/* grid */
#grid {clear: both; position: relative}
.item {width: 75px; height: 155px; background: #EEEEEE;font-size: 10px;margin-bottom:10px; text-align: center;}
.item img {
width:75px;
}
.last_name {
display:none;
}
</style>
<!-- javascript -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.shuffle.js"></script>
<script>
$(document).ready(function() {
/* initialize shuffle plugin */
var $grid = $('#grid');
$grid.shuffle({
itemSelector: '.item', // the selector for the items in the grid
gutterWidth: 10
});
// Sorting options
$('.sort-options').on('change', function() {
var sort = this.value,
opts = {};
// We're given the item wrapped in jQuery
if (sort === 'data-party') {
opts = {
reverse: true,
by: function($el) {
return $el.data('data-party');
}
};
} else if (sort === 'data-district') {
opts = {
by: function($el) {
return $el.data('data-district');
}
};
} else if (sort === 'data-last_name') {
opts = {
by: function($el) {
return $el.data('data-last_name');
}
};
}
// Filter items
$grid.shuffle('sort', opts);
});
});
</script>
</head>
<body>
<!-- #container -->
<div id="container">
<select class="sort-options">
<option value="">Default</option>
<option value="data-district">District</option>
<option value="data-last_name">Last name</option>
<option value="data-party">Party</option>
</select>
<!-- just show two items. Actual test page has about 60 -->
<div id="grid">
<div data-groups='["photography"]' class="item dem" data-party="dem" data-last_name="Abney" data-district="73">
<img src="http://res.providencejournal.com/politics/assets/images/house-senate-thumbs/rep_marvin_l_abney.jpg"><br>
<div class="name">Rep. Marvin L. Abney</div>
<div class="last_name">Abney</div>
<span class="party">(D-</span><span class="district">73)</span>
</div>
<div data-groups='["photography"]' class="item dem" data-party="dem" data-last_name="Ackerman" data-district="45">
<img src="http://res.providencejournal.com/politics/assets/images/house-senate-thumbs/rep_mia_a_ackerman.jpg"><br>
<div class="name">Rep. Mia A. Ackerman</div>
<div class="last_name">Ackerman</div>
<span class="party">(D-</span><span class="district">45)</span>
</div>
</div>
</div>
<!-- /#container -->
</body>
</html>
방화 광은 이벤트가 발생하지만 div는 이동하지 않음을 나타냅니다. 어떤 도움을 주시면 감사하겠습니다!