jquery - 最大的项目始终首先显示在同位素中

Question

我一直在尝试优秀的 jQuery Isotope 库，这里有一个工作示例:http://nmcweb.co.uk/crv

我想要的是每次单击并展开一个项目时，它都会移动到网格的左上角，本质上成为排序顺序中的第一个项目。我已经尝试过有关堆栈溢出的几个类似问题的代码，但没有成功。

它往往在最初的几次点击中起作用，但之后就停止了。有什么想法吗？

我是 jQuery 新手，所以我可能错过了一些非常愚蠢的东西。

HTML:

<div id="container">

 <div class="box">
    <a href="#"><img src="./stock/1.png" /></a>
      <div class="more" >
         <p>Text blah blah blah</p>

      </div>
   </div>

jQuery:

            <script>$(window).load(function(){


  var $container = $('#container');

  $container.isotope({
     masonry: {
      columnWidth: 320
    },

    itemSelector: '.box',

    getSortData : {
      width : function( $item ){
        // sort by biggest width first, then by original order
        return -$item.width() + $item.index();
      }
    },
    sortBy : 'width'

  })

     $('.box').click(function(){
    var $this = $(this),
        tileStyle = $this.hasClass('big') ? { width: 300 } : { width: 620 };

    $this.addClass('big').children('.more').show();
    $this.siblings().removeClass('big').children('.more').hide();


    $container.isotope( 'updateSortData', $this ).isotope();

  });


});</script>

Answer 1

这是 fiddle 的重做(找不到链接:(
原件上的图 block 上有链接，我想这正是您所追求的。我会更多地了解我的本地系统，但是......啊，困惑。我希望这会有所帮助。

<style>
.element {  width: 75px;  height: 75px;  background: #0FF;  margin: 5px;  float: left;}
.trans { width: 75px;  height: 75px;  background: #F0F;  margin: 5px; float:left}
.element.searchPali {  width: 160px;  height: 160px;  background: red;}
/* Start: Recommended Isotope styles *//**** Isotope Filtering ****/
.isotope-item {  z-index: 2;}
.isotope-hidden.isotope-item {  pointer-events: none;  z-index: 1;}
/**** Isotope CSS3 transitions ****/
.isotope,.isotope .isotope-item {  -webkit-transition-duration: 0.8s;     -moz-transition-duration: 0.8s;          transition-duration: 0.8s;}
.isotope {  -webkit-transition-property: height, width;     -moz-transition-property: height, width;          transition-property: height, width;}
.isotope .isotope-item {  -webkit-transition-property: -webkit-transform, opacity;     -moz-transition-property:    -moz-transform, opacity;          transition-property:         transform, opacity;}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,.isotope.no-transition .isotope-item,.isotope .isotope-item.no-transition {  -webkit-transition-duration: 0s;     -moz-transition-duration: 0s;          transition-duration: 0s;}
/* End: Recommended Isotope styles */
</style>

<table border=1><TR><TD>
<div class="trans">One <a href="#" id="tile-4">link to element D</a></div>
<div class="trans">Two<a href="#" id="tile-3">link to element C</a></div>
</TD><TD>
<div class="trans">Three <a href="#" id="tile-6">link to element F</a></div>
<div class="trans">Four<a href="#" id="tile-7">link to element G</a></div>
</TD></TR></table>

<div id="container" style='width:355px;border:1px solid black'>
<table ><TR><TD>
<div id="1" class="element">A</div>
<div id="2" class="element">B</div>
<div id="3" class="element">C</div>
<div id="4" class="element">D</div>

</TD><TD valign=top>
<div id="5" class="element">E</div>
<div id="6" class="element">F</div>
<div id="7" class="element">G</div>
</TD></TR></table>
</div>
<script src="../../jquery.min.js"></script>
<script src="jquery.isotope.min.js"></script>

<script>
$(function() {

var $container = $('#container'),
$items = $('a');
$container.isotope({ itemSelector: '.element',
masonry: { columnWidth: 85 },
getSortData: { 
searchPali: function($item) { return ($item.hasClass('searchPali') ? -1000 : 0) + $item.index(); }
},
sortBy: 'searchPali'
});

$('.trans').click(function(event) {
var $targetID = event.target.id;
$targetID =  $targetID.replace('tile-','');
$this=$('#'+$targetID);
var $previoussearch = $('.searchPali');
if (!$this.hasClass('searchPali')) { $this.addClass('searchPali'); }
$previoussearch.removeClass('searchPali');
$container.isotope('updateSortData', $this).isotope('updateSortData', $previoussearch).isotope();
});

});
</script>