Question

我正在使用像'Google Images'这样的扩展预览制作缩略图网格。我们的想法是获得点击的项目索引，点击的项目行号以及将插入扩展容器的项目。

问题在于，当我第一次单击任何项目时，一切都按预期进行，但当我再次单击相同的元素时，之前的值加倍，当重新调整容器重复上下切换时，会发生同样的事情。 / p>

这是我的代码：

HTML

<div class="container">
    <ul>
        <li>
            <a href=""></a>
        </li>
        <li>
            <a href=""></a>
        </li>
        <li>
            <a href=""></a>
        </li>
        <li>
            <a href=""></a>
        </li>
        <li>
            <a href=""></a>
        </li>
        <li>
            <a href=""></a>
        </li>
        <li>
            <a href=""></a>
        </li>
        <li>
            <a href=""></a>
        </li>
        <div id="project-wrapper"></div>
    </ul>
</div>

CSS

* {
        margin: 0;
        padding: 0;
}

*, *:before, *:after { 
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;  
}


    ul {
        list-style: none;
        position: relative;
        margin: 0;
        padding: 0;
        font-size: 0;
    }

    .container {
        max-width: 1200px;
        margin: 0 auto;
    }



    ul li {
        display: inline-block;
        width: 25%;
        vertical-align: middle;
        overflow: hidden;
        font-size: 0;
        border-bottom: 1px solid #000;
    }

    @media only screen and (max-width: 959px) { ul li { width: 33.333333333333%; } }

    @media only screen and (max-width: 800px) { ul li { width: 50%; } }

    @media only screen and (max-width: 500px) { ul li { width: 100%; } }

    ul li + li { border-left: 1px solid #000; } 

    ul li a {
        display: block;
        width: 100%;
        height: 200px;
        background-color: #999;
    }

    ul li div {
        position: absolute;
        top: auto;
        left: 0;
        height: 500px;
        background-color: #666;
        width: 100%;
    }

    #project-wrapper {
        height: 200px;
        width: 100%;
        background-color: #000;
        display: none;
    }

JS

var list       = $('ul'),
    listItems  = $('ul li'),
    projectWrapper = $('#project-wrapper');

    totalItems = $('ul li').length;


var gridInfo = function (){

    var itemsPerRow  = 0,
        rowsNumber   = 0,
        lastRowItems = 0;

    listItems.each(function(){
        var $self = $(this);

        if ($self.prev('li').length > 0) {
            if($self.position().top != $self.prev('li').position().top) return false;
            itemsPerRow++;
        } else {
            itemsPerRow++;
        }
    })

    lastRowItems = totalItems % itemsPerRow;
    rowsNumber   = ( lastRowItems != 0 ) ? ( (totalItems - lastRowItems) / itemsPerRow ) + 1 : ( (totalItems - lastRowItems) / itemsPerRow) ;

    return {
        itemsPerRow  : itemsPerRow,
        rowsNumber   : rowsNumber
    }
}


$(window).on("debouncedresize", function( event ) {

    if (listItems.hasClass('active')) {
        var activeItem = $('li.active'),
            currentItemIndex = listItems.index( activeItem ) + 1,
            targetRow = Math.ceil( currentItemIndex / gridInfo().itemsPerRow ),
            targetItem = ( targetRow != gridInfo().rowsNumber  ) ? ( targetRow * gridInfo().itemsPerRow ) -1 : listItems.index(listItems.last());

        projectWrapper.insertAfter( list.find('li:eq(' + targetItem + ')') );
    }

});

listItems.click(function(e){
    e.preventDefault()
    var $self = $(this);
    listItems.removeClass('active');
    $self.addClass('active');

    var currentItemIndex = listItems.index($self) + 1,
        targetRow = Math.ceil( currentItemIndex / gridInfo().itemsPerRow ),
        targetItem = ( targetRow != gridInfo().rowsNumber  ) ? ( targetRow * gridInfo().itemsPerRow ) -1 : listItems.index(listItems.last());

        projectWrapper.show().insertAfter( list.find('li:eq(' + targetItem + ')') );
})

Answer 1

您需要在每次点击时重新定位projectWrapper。可以将其移动到最后位置，然后尝试将其放置在其计算位置。

同样在你的点击事件中，一次调用gridInfo并将值存储在某个变量中，而不是进行4次单独的调用。

在类似Google的缩略图预览中查找每行的项目数

1 个答案: