И вот еще один Razorjack Quicksand для jQuery jumpy transition - jsfiddle при условии

При фильтрации с помощью зыбучего песка все изображения начинаются с прыжка, прежде чем скользить в нужное положение. Я прочитал много q & здесь, но мне не удалось избавиться от этого прыжка.И вот еще один Razorjack Quicksand для jQuery jumpy transition - jsfiddle при условии

В указанном примере/jsfiddle, ошибка воспроизводимости этого шаг за шагом:

Настройки размера окна, так что с содержит два изображения. На выходе должна отображаться сетка изображений 2x2.
Нажмите «Все», чтобы отфильтровать все (хотя все уже показано)
Нажмите «Жесткий» фильтр для фильтрации. Изображения теперь быстро «прыгают вверх», прежде чем сдвинуться в положение.

jsfiddle доступна здесь: https://jsfiddle.net/2kgu8c80/19/

Внешние библиотеки:

JQuery 3,0
https://cdn.jsdelivr.net/quicksand/1.4/jquery.quicksand.js

HTML:

<head> 
    <title>My Wooden Puzzles</title> 
    <script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> 
    <script type="text/javascript" src="quicksand/quicksand.min.js">/script> 
</head> 
<body> 
    <ul id="pzl_filter"> 
    <li id="filter_hard"><a href="javascript:filter('all');">All</a></li> 
    <li id="filter_hard"><a href="javascript:filter('hard');">Hard</a></li> 
    <li id="filter_easy"><a href="javascript:filter('easy');">Easy</a></li> 
    </ul> 
    <div id="outer-wrapper"> 
      <ul id="pzl_thumbs" class="pzl_thumbs"> 

     <li id="pzl_main_chess_snake" data-id="chess_snake" class="pzl_d_hard"> 
      <img src="http://www.mywoodenpuzzles.com/data/chess_snake/main_thumb.jpg" class="img_thumbs"> 
     <dl><br><dd>Chass Snake</dd></dl></li> 

     <li id="pzl_main_triforce_2" data-id="triforce_2" class="pzl_d_easy"><a href="javascript:select_puzzle('triforce_2', 'pieces');"><img src="http://www.mywoodenpuzzles.com/data/triforce_2/main_thumb.jpg" class="img_thumbs"> 
     <dl><br><dd>Triforce 2</dd></dl></a></li> 

     <li id="pzl_main_three_pieces_cross" data-id="three_pieces_cross" class="pzl_d_hard"> 
     <img src="http://www.mywoodenpuzzles.com/data/three_pieces_cross/main_thumb.jpg" class="img_thumbs"> 
     <dl><br><dd>3 pieces cross</dd></dl></li> 

     <li id="pzl_main_centrifuge" data-id="centrifuge" class="pzl_d_easy"> 
     <img src="http://www.mywoodenpuzzles.com/data/centrifuge/main_thumb.jpg" class="img_thumbs"> 
     <dl><br><dd>Centrifuge</dd></dl></li> 
    </ul> 
     </div> 
</body>

CSS

/* Layout & items */ 

#outer-wrapper { 
    margin: 5px 20px; 
} 

.pzl_thumbs li, 
.img_thumbs { 
    background-color: transparent; 
    display: block; 
    max-height: 100%; 
} 

.img_thumbs { 
    height: 192px; 
} 

.pzl_thumbs li { 
    float: left; 
    height: 215px; 
    margin: 10px 10px 30px 10px; 
} 

.pzl_thumbs ul { 
    float: left; 
} 

.pzl_thumbs dd { 
    color: #666666; 
    font-size: 14px; 
    text-align: center; 
}

JavaScript

var $list = jQuery("#pzl_thumbs"); 
var $data = $list.clone(); 
var $filteredData = null; 

function filter(difficulty) { 

    var sel = ((difficulty!='all')? 'li.pzl_d_' + difficulty : 'li') ; 

    $filteredData = $data.find(sel); 
    $list.quicksand($filteredData, { 
     duration: 1800, 
     adjustHeight: false, 
     }); 
}

источник

2017-01-05 Andreas Lundgren

Проблема заключается в max-height: 100%; из .pzl_thumbs li. Вам необходимо удалить это и позволить вашим li элементам изменять размер в зависимости от их содержимого.

Таким образом, изменить это:

.pzl_thumbs li, 
.img_thumbs { 
    background-color: transparent; 
    display: block; 
    max-height: 100%; 
}

Для этого:

.pzl_thumbs li, 
.img_thumbs { 
    background-color: transparent; 
    display: block; 
}

Если вам нужна max-height: 100%; для .img_thumbs, переместить его туда вместо:

.img_thumbs { 
    height: 192px; 
    max-height: 100%; 
}

См https://jsfiddle.net/2kgu8c80/22/.

источник

2017-01-15 02:13:17 Rei

Спасибо! Прекрасный ответ, который я рад наградить! Я просто хотел сообщить вам, что StackOverflow говорит мне, что он должен пройти еще 8 часов, прежде чем я смогу наградить вас щедростью. –

@AndreasLundgren Добро пожаловать. Я рад помочь и заблаговременно поблагодарить за щедрость. – Rei

И вот еще один Razorjack Quicksand для jQuery jumpy transition - jsfiddle при условии

ответ

Смежные вопросы