文章/答案/技术大牛

发布

社区首页 >问答首页 >因此，另一个Razorjack Quicksand跳变- jsfiddle提供了

问因此，另一个Razorjack Quicksand跳变- jsfiddle提供了
EN

Stack Overflow用户

提问于 2017-01-05 12:34:13

回答 1查看 76关注 0票数 1

当使用流沙进行过滤时，所有图像在滑行进入位置之前先从跳跃开始。我在这里读了很多q&a，但是我没有设法摆脱这个跳跃。

在提供的示例/jsfiddle中，通过以下步骤可以复制错误：

调整窗口大小，以便with包含两个图像。输出应该显示一个由2x2图像组成的网格。
按“全部”以过滤所有(尽管所有内容都已显示)
按“硬”键过滤。这些图像现在快速“跳起来”，然后滑入位置。

在这里可以找到一个小提琴：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, 
        });
}

quicksand

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-01-15 02:13:17

问题是max-height: 100%; of .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%; for .img_thumbs，请将其移到那里：

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

见https://jsfiddle.net/2kgu8c80/22/。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41485259

复制

相似问题

问因此，另一个Razorjack Quicksand跳变- jsfiddle提供了
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问因此，另一个Razorjack Quicksand跳变- jsfiddle提供了EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问因此，另一个Razorjack Quicksand跳变- jsfiddle提供了
EN