将可见项移动到索引的开头

时间：2019-12-01 09:31:13

标签： jquery css

我有一个绝对位于图像上的元素列表。 我创建了一个过滤器来隐藏/显示正在运行的元素，但是我想将显示的项移动到容器中的第一个子项，否则当过滤器处于活动状态时，如果先前的项“消失”，将只有空白活性。 如果我能够做到这一点，我可以使用CSS根据：first-of-type，：nth-​​of-type（2）等定义绝对位置-以便始终将第一个子代放置在我想要的位置

代码是：

$(".trigger-filter").click(function() {
  var filterData = $(this).attr("data-filter");
  if (filterData == "all") {
    $(".team").show("2000");
  } else {
    $(".team").not("." + filterData).hide("2000");
    $(".team").filter("." + filterData).show("2000");
  }
});

HTML：

<div class="team-filters">
  <div class="trigger-filter" data-filter="tarya-fintech">
    <img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-610.png">
  </div>
  <div class="trigger-filter" data-filter="management">
    <img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-104-1.png">
  </div>
  <div class="trigger-filter" data-filter="marketing">
    <img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-57-2.png">
  </div>
  <div class="trigger-filter" data-filter="legal">
    <img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-184-1.png">
  </div>
  <div class="trigger-filter" data-filter="tarya-holding">
    <img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-73.png">
  </div>
  <div class="trigger-filter" data-filter="finance">
    <img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-56-1.png">
  </div>
  <div class="trigger-filter" data-filter="underwriting">
    <img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-95-1.png">
  </div>
  <div class="trigger-filter" data-filter="back-office">
    <img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-183-1.png">
  </div>
  <div class="trigger-filter" data-filter="customer-service">
    <img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-103-1.png">
  </div>
  <div class="trigger-filter" data-filter="customer-success">
    <img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-72-1.png">
  </div>
  <div class="trigger-filter" data-filter="collection">
    <img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-185-2.png">
  </div>
  <div class="trigger-filter" data-filter="business-development">
    <img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-182-1.png">
  </div>
  <div class="trigger-filter" data-filter="tarya-ukraine">
    <img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-545.png">
  </div>
  <div class="trigger-filter" data-filter="all">
    <img src="http://outofsite.co.il/traya/wp-content/uploads/2019/11/Group-72222222.png">
  </div>
</div>
<div class="team-body">
  <div class="team-image">
    <img class="desktop-img" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/clean.png">
  </div>


  <div class="team eran-yogev tarya-fintech">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev tarya-fintech">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev tarya-ukraine">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev tarya-ukraine">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev collection">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev collection">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev customer-success">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev back-office">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev underwriting">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev finance">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev finance">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev tarya-holding">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev legal">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev legal">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev marketing">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
  <div class="team eran-yogev management">
    <img width="400" height="400" src="http://outofsite.co.il/traya/wp-content/uploads/2019/10/Eran-1.jpg">
  </div>
</div>

CSS：

  .team-body {
    position: relative;
  }

  .team-filters img {
    background: #dbdbdb;
    filter: grayscale(100%);
    border-radius: 100%;
    width: 90%;
    height: 90%;
    margin: 0 auto;
  }

  .team-filters {
    margin-bottom: 50px;
  }

  .checked-circle {
    filter: none !important;
  }


  .team-image {
    position: relative;
  }

  .team-image img {
    width: 100%;
  }

  .team-picture {
    border-radius: 100%;
    position: relative;
  }


  .team,
  .team-cat {
    position: absolute;
    z-index: 9999;
  }

  .eran-yogev {
    top: 0.4%;
    left: 44.4%;
    width: 8.5%;
  }

  .shlomi-frenkel {
    top: 0.2%;
    left: 62.4%;
    width: 11%;
  }

  .roy-shenbaum {
    top: 3.6%;
    left: 53.1%;
    width: 9.4%;
  }

  .giora-olmert {
    top: 4.95%;
    left: 41.4%;
    width: 11%;
  }

  .iris-keret {
    top: 6.75%;
    left: 16.6%;
    width: 9.4%;
  }

  .tamar-levine {
    top: 2.3%;
    left: 73.2%;
    width: 12.6%;
  }

  .mikhail-geoui {
    top: 7.75%;
    left: 28.6%;
    width: 11%;
  }

  .elyah-salomon {
    top: 11.95%;
    left: 7%;
    width: 9.4%;
  }

  .nitzan-alcobi {
    top: 10.4%;
    left: 43%;
    width: 15.1%;
  }

  .bianca-meger {
    top: 16.55%;
    left: 19.5%;
    width: 14.1%;
  }

  .tal-rave {
    top: 8.35%;
    left: 68%;
    width: 10.4%;
  }

  .liav-david {
    top: 22%;
    left: 41.4%;
    width: 9.4%;
  }

  .eliad-zefania {
    top: 25.65%;
    left: 26%;
    width: 11%;
  }

  .avner-erez {
    top: 16.5%;
    left: 37%;
    width: 11%;
  }

  .assaf-shlush {
    top: 27.6%;
    left: 14.9%;
    width: 9.4%;
  }

  .liran-brecher {
    top: 25.6%;
    left: 69.2%;
    width: 9.4%;
  }

  .shahaf-erlich {
    top: 27.3%;
    left: 45.9%;
    width: 11.5%;
  }

  .arnon-lempert {
    top: 14.3%;
    left: 71%;
    width: 11%;
  }

  .ron-nitzan {
    top: 32.9%;
    left: 52%;
    width: 9.4%;
  }

  .shay-butbul {
    top: 30.1%;
    left: 75.7%;
    width: 9.4%;
  }

  .iris-yogev {
    top: 29.7%;
    left: 88.55%;
    width: 9.4%;
  }

  .limor-baranes {
    top: 35.5%;
    left: 15.3%;
    width: 9.4%;
  }

  .liat-raz-rubin {
    top: 33%;
    left: 2.3%;
    width: 9.4%;
  }

  .eyal-elhayany {
    top: 32.35%;
    left: 37.7%;
    width: 12.4%;
  }

  .varda-lusthaus {
    top: 33%;
    left: 62.6%;
    width: 13.2%;
  }

  .keren-stern-avnon {
    top: 28.9%;
    left: 61.25%;
    width: 7.8%;
  }

  .liran-ram-arviv {
    top: 34.9%;
    left: 77.4%;
    width: 9.4%;
  }

  .itay-ram {
    top: 34.5%;
    left: 88.9%;
    width: 9.4%;
  }

  .michal-moses {
    top: 38.15%;
    left: 24.5%;
    width: 14.1%;
  }

  .alice-lachnish {
    top: 38.3%;
    left: 40.2%;
    width: 9.4%;
  }

  .dan-wagner {
    top: 44%;
    left: 16.6%;
    width: 9.4%;
  }

  .kobi-moshe {
    top: 45.8%;
    left: 28.7%;
    width: 11%;
  }

  .natali-haziza {
    top: 51.4%;
    left: 69.1%;
    width: 11%;
  }

  .david-eskenazi {
    top: 43.6%;
    left: 41.3%;
    width: 11%;
  }

  .sharon-kraus {
    top: 57.9%;
    left: 71.3%;
    width: 14.1%;
  }

  .limor-levinstein {
    top: 43.4%;
    left: 82.6%;
    width: 11%;
  }

  .efrat-biber {
    top: 59.2%;
    left: 1%;
    width: 16.2%;
  }

  .esti-barkish {
    top: 50.1%;
    left: 7%;
    width: 9.4%;
  }

  .zivit-ruderfer {
    top: 63.75%;
    left: 26%;
    width: 11%;
  }

  .noam-rubin-levi {
    top: 55.2%;
    left: 37%;
    width: 11%;
  }

  .keren-katz {
    top: 60.6%;
    left: 41.3%;
    width: 9.4%;
  }

  .mor-swisa {
    top: 67.3%;
    left: 58.3%;
    width: 9.4%;
  }

  .yana-david {
    top: 64.4%;
    left: 67.7%;
    width: 9.4%;
  }

  .daniel-mor-benisho {
    top: 65.3%;
    left: 15.1%;
    width: 9.4%;
  }

  .rachel-kashkash {
    top: 66.9%;
    left: 0%;
    width: 13.8%;
  }

  .hen-zehavi {
    top: 68.9%;
    left: 88.2%;
    width: 9.4%;
  }

  .magali-schuvaks {
    top: 66.8%;
    left: 78%;
    width: 8.1%;
  }

  .bianca-meger-33 {
    top: 75.8%;
    left: 52.7%;
    width: 13.7%;
  }

  .boris-pavlov {
    top: 73.8%;
    left: 87.1%;
    width: 11%;
  }

  .sapir-avraham {
    top: 71.5%;
    left: 79%;
    width: 7.3%;
  }

  .ifat-cohen {
    top: 81.3%;
    left: 18.65%;
    width: 11%;
  }

  .hila-manor {
    top: 72.5%;
    left: 68.6%;
    width: 7.8%;
  }

  .shimon-sabag {
    top: 75.7%;
    left: 55.7%;
    width: 11%;
  }

  .nofar-michaeli {
    top: 71.4%;
    left: 53.3%;
    width: 7.8%;
  }

  .hadar-tamarkin {
    top: 81.2%;
    left: 69.7%;
    width: 9.4%;
  }

  .perl-amichai {
    top: 72%;
    left: 42.3%;
    width: 9.4%;
  }

  .dana-kopelman-haim {
    top: 74.4%;
    left: 0%;
    width: 11.1%;
  }

  .rostyslav-diachenko {
    top: 87%;
    left: 5.9%;
    width: 11%;
  }

  .yair-ben-david {
    top: 76.9%;
    left: 39.6%;
    width: 13.8%;
  }

  .max-tokarev {
    top: 86%;
    left: 59.1%;
    width: 16.4%;
  }

  .yaniv-komemi {
    top: 80%;
    left: 0%;
    width: 14.4%;
  }

  .vitaliy-shkurenko {
    top: 87.1%;
    left: 84.2%;
    width: 13.9%;
  }

  .nati-kamhazi {
    top: 81.2%;
    left: 53.3%;
    width: 11.1%;
  }

  .oleh-osyka {
    top: 91.35%;
    left: 20.2%;
    width: 14.1%;
  }

  .vladyslav-martynov {
    top: 93%;
    left: 36.95%;
    width: 11.1%;
  }

  .nitzan-zeev {
    top: 57%;
    left: 50%;
    width: 9.4%;
  }

  .roy-mor {
    top: 76%;
    left: 29%;
    width: 7.8%;
  }

  .frider-drorit {
    top: 70.3%;
    left: 16.2%;
    width: 9.4%;
  }

  .bar-dayan {
    top: 42.9%;
    left: 54.6%;
    width: 9.4%;
  }

  .talya-sharamy {
    top: 45.8%;
    left: 69.9%;
    width: 9.4%;
  }

  .miki-ishai {
    top: 10%;
    left: 81%;
    width: 9.4%;
  }

  .andrey-pirogov {
    top: 5%;
    left: 88.3%;
    width: 11.1%;
  }

  .gadi-sade {
    top: 13.9%;
    left: 88.9%;
    width: 11%;
  }

  .ivo-segora {
    top: 5.5%;
    left: 0%;
    width: 13.5%;
  }

  .nitza-kaminsky {
    top: 70%;
    left: 27.5%;
    width: 11.1%;
  }

  .ofir-fouks {
    top: 86%;
    left: 76.4%;
    width: 7.4%;
  }


  .eran-yogev .team-overlay,
  .mikhail-geoui .team-overlay,
  .nitzan-alcobi .team-overlay,
  .avner-erez .team-overlay,
  .arnon-lempert .team-overlay,
  .eliad-zefania .team-overlay,
  .eyal-elhayany .team-overlay,
  .alice-lachnish .team-overlay,
  .keren-stern-avnon .team-overlay,
  .kobi-moshe .team-overlay,
  .noam-rubin-levi .team-overlay,
  .natali-haziza .team-overlay,
  .efrat-biber .team-overlay,
  .zivit-ruderfer .team-overlay,
  .perl-amichai .team-overlay,
  .hila-manor .team-overlay,
  .yaniv-komemi .team-overlay,
  .max-tokarev .team-overlay,
  .gadi-sade .team-overlay,
  .frider-drorit .team-overlay {
    background: rgba(105, 215, 222, 0.5);
  }

  .roy-shenbaum .team-overlay,
  .tal-rave .team-overlay,
  .bianca-meger .team-overlay,
  .shahaf-erlich .team-overlay,
  .liat-raz-rubin .team-overlay,
  .iris-yogev .team-overlay,
  .liran-ram-arviv .team-overlay,
  .rachel-kashkash .team-overlay,
  .sapir-avraham .team-overlay,
  .yair-ben-david .team-overlay,
  .hadar-tamarkin .team-overlay,
  .ifat-cohen .team-overlay,
  .vladyslav-martynov .team-overlay,
  .ivo-segora .team-overlay,
  .bar-dayan .team-overlay,
  .talya-sharamy .team-overlay {
    background: rgba(135, 40, 140, 0.5);
  }

  .tamar-levine .team-overlay,
  .assaf-shlush .team-overlay,
  .liran-brecher .team-overlay,
  .itay-ram .team-overlay,
  .yana-david .team-overlay,
  .daniel-mor-benisho .team-overlay,
  .nati-kamhazi .team-overlay,
  .vitaliy-shkurenko .team-overlay,
  .miki-ishai .team-overlay,
  .nitza-kaminsky .team-overlay,
  .roy-mor .team-overlay,
  .ofir-fouks .team-overlay {
    background: rgba(128, 128, 128, 0.25);
  }


  @media (max-width: 767px) {

    .team-filters {
      border-bottom: 1px solid #cacaca;
      display: block !important;
    }

    .team-image,
    .team-cat,
    .circle {
      display: none;
    }

    .all-of-them {
      background: url(http://outofsite.co.il/traya/wp-content/uploads/2019/11/Android-Mobile-–-7-1.jpg);
      height: 5200px;
      width: 100%;
      position: relative;
      background-repeat: repeat;
      background-size: 100%;
    }

    .rtl .team-role,
    .rtl .team-role .en {
      font-size: 13px;
      line-height: 1;
      margin-top: 5px;
    }

    .team-role,
    .team-role .en {
      font-size: 11px;
      line-height: 1;
      margin-top: 5px;
    }

    .team:first-child,
    .team:nth-child(8n+1) {
      width: 19%;
      left: 27%;
    }

    .team:nth-child(2),
    .team:nth-child(8n+2) {
      width: 27%;
      left: 50%;
    }

    .team:nth-child(3),
    .team:nth-child(8n+3) {
      width: 27%;
      left: 20%;
    }

    .team:nth-child(4),
    .team:nth-child(8n+4) {
      width: 27%;
      left: 49%;
    }

    .team:nth-child(5),
    .team:nth-child(8n+5) {
      width: 25%;
      left: 26%;
    }

    .team:nth-child(6),
    .team:nth-child(8n+6) {
      width: 20%;
      left: 57%;
    }

    .team:nth-child(7),
    .team:nth-child(8n+7) {
      width: 31%;
      left: 25%;
    }

    .team:nth-child(8),
    .team:nth-child(8n+8) {
      width: 22%;
      left: 60%;
    }

    .team:first-of-type {
      top: 13px;
    }

    .team:nth-of-type(2) {
      top: 45px;
    }

    .team:nth-of-type(3) {
      top: 125px;
    }

    .team:nth-of-type(4) {
      top: 185px;
    }

    .team:nth-of-type(5) {
      top: 260px;
    }

    .team:nth-of-type(6) {
      top: 345px;
    }

    .team:nth-of-type(7) {
      top: 390px;
    }

    .team:nth-of-type(8) {
      top: 460px;
    }

    .team:nth-of-type(9) {
      top: 533px;
    }

    .team:nth-of-type(10) {
      top: 565px;
    }

    .team:nth-of-type(11) {
      top: 645px;
    }

    .team:nth-of-type(12) {
      top: 705px;
    }

    .team:nth-of-type(13) {
      top: 780px;
    }

    .team:nth-of-type(14) {
      top: 865px;
    }

    .team:nth-of-type(15) {
      top: 910px;
    }

    .team:nth-of-type(16) {
      top: 980px;
    }

    .team:nth-of-type(17) {
      top: 1053px;
    }

    .team:nth-of-type(18) {
      top: 1085px;
    }

    .team:nth-of-type(19) {
      top: 1165px;
    }

    .team:nth-of-type(20) {
      top: 1225px;
    }

    .team:nth-of-type(21) {
      top: 1300px;
    }

    .team:nth-of-type(22) {
      top: 1385px;
    }

    .team:nth-of-type(23) {
      top: 1430px;
    }

    .team:nth-of-type(24) {
      top: 1500px;
    }

    .team:nth-of-type(25) {
      top: 1573px;
    }

    .team:nth-of-type(26) {
      top: 1605px;
    }

    .team:nth-of-type(27) {
      top: 1685px;
    }

    .team:nth-of-type(28) {
      top: 1745px;
    }

    .team:nth-of-type(29) {
      top: 1820px;
    }

    .team:nth-of-type(30) {
      top: 1905px;
    }

    .team:nth-of-type(31) {
      top: 1950px;
    }

    .team:nth-of-type(32) {
      top: 2020px;
    }

    .team:nth-of-type(33) {
      top: 2093px;
    }

    .team:nth-of-type(34) {
      top: 2135px;
    }

    .team:nth-of-type(35) {
      top: 2205px;
    }

    .team:nth-of-type(36) {
      top: 2265px;
    }

    .team:nth-of-type(37) {
      top: 2340px;
    }

    .team:nth-of-type(38) {
      top: 2425px;
    }

    .team:nth-of-type(39) {
      top: 2470px;
    }

    .team:nth-of-type(40) {
      top: 2540px;
    }

    .team:nth-of-type(41) {
      top: 2613px;
    }

    .team:nth-of-type(42) {
      top: 2645px;
    }

    .team:nth-of-type(43) {
      top: 2725px;
    }

    .team:nth-of-type(44) {
      top: 2785px;
    }

    .team:nth-of-type(45) {
      top: 2860px;
    }

    .team:nth-of-type(46) {
      top: 2945px;
    }

    .team:nth-of-type(47) {
      top: 2990px;
    }

    .team:nth-of-type(48) {
      top: 3060px;
    }

    .team:nth-of-type(49) {
      top: 3133px;
    }

    .team:nth-of-type(50) {
      top: 3165px;
    }

    .team:nth-of-type(51) {
      top: 3245px;
    }

    .team:nth-of-type(52) {
      top: 3305px;
    }

    .team:nth-of-type(53) {
      top: 3380px;
    }

    .team:nth-of-type(54) {
      top: 3465px;
    }

    .team:nth-of-type(55) {
      top: 3510px;
    }

    .team:nth-of-type(56) {
      top: 3580px;
    }

    .team:nth-of-type(57) {
      top: 3653px;
    }

    .team:nth-of-type(58) {
      top: 3685px;
    }

    .team:nth-of-type(59) {
      top: 3765px;
    }

    .team:nth-of-type(60) {
      top: 3825px;
    }

    .team:nth-of-type(61) {
      top: 3900px;
    }

    .team:nth-of-type(62) {
      top: 3985px;
    }

    .team:nth-of-type(63) {
      top: 4030px;
    }

    .team:nth-of-type(64) {
      top: 4100px;
    }

    .team:nth-of-type(65) {
      top: 4173px;
    }

    .team:nth-of-type(66) {
      top: 4205px;
    }

    .team:nth-of-type(67) {
      top: 4285px;
    }

    .team:nth-of-type(68) {
      top: 4345px;
    }

    .team:nth-of-type(69) {
      top: 4420px;
    }

    .team:nth-of-type(70) {
      top: 4505px;
    }

    .team:nth-of-type(71) {
      top: 4550px;
    }

    .team:nth-of-type(72) {
      top: 4620px;
    }

    .team:nth-of-type(73) {
      top: 4693px;
    }

    .team:nth-of-type(74) {
      top: 4725px;
    }

    .team:nth-of-type(75) {
      top: 4805px;
    }


    .trigger-filter[data-filter='tarya-fintech'] img.checked-circle,
    .trigger-filter[data-filter='marketing'] img.checked-circle,
    .trigger-filter[data-filter='legal'] img.checked-circle,
    .trigger-filter[data-filter='collection'] img.checked-circle {
      background: #03b9c4;
    }

    .trigger-filter[data-filter='all'] img.checked-circle,
    .trigger-filter[data-filter='customer-success'] img.checked-circle,
    .trigger-filter[data-filter='back-office'] img.checked-circle {
      background: #86278b;
    }

    .trigger-filter[data-filter='management'] img.checked-circle,
    .trigger-filter[data-filter='finance'] img.checked-circle {
      background: #b1e6ea;
    }

    .trigger-filter[data-filter='tarya-ukraine'] img.checked-circle,
    .trigger-filter[data-filter='business-development'] img.checked-circle,
    .trigger-filter[data-filter='customer-service'] img.checked-circle,
    .trigger-filter[data-filter='underwriting'] img.checked-circle,
    .trigger-filter[data-filter='tarya-holding'] img.checked-circle {
      background: #4e4d4b;
    }

  }


  @media (min-width: 400px) and (max-width: 767px) {

    .team:first-of-type(1) {
      top: 13px !important;
    }

    .team:nth-of-type(2) {
      top: 55px !important;
    }

    .team:nth-of-type(3) {
      top: 135px !important;
    }

    .team:nth-of-type(4) {
      top: 205px !important;
    }

    .team:nth-of-type(5) {
      top: 290px !important;
    }

    .team:nth-of-type(6) {
      top: 380px !important;
    }

    .team:nth-of-type(7) {
      top: 430px !important;
    }

    .team:nth-of-type(8) {
      top: 510px !important;
    }

    .team:nth-of-type(9) {
      top: 586px !important;
    }

    .team:nth-of-type(10) {
      top: 628px !important;
    }

    .team:nth-of-type(11) {
      top: 708px !important;
    }

    .team:nth-of-type(12) {
      top: 778px !important;
    }

    .team:nth-of-type(13) {
      top: 863px !important;
    }

    .team:nth-of-type(14) {
      top: 953px !important;
    }

    .team:nth-of-type(15) {
      top: 1003px !important;
    }

    .team:nth-of-type(16) {
      top: 1083px !important;
    }

    .team:nth-of-type(17) {
      top: 1159px !important;
    }

    .team:nth-of-type(18) {
      top: 1201px !important;
    }

    .team:nth-of-type(19) {
      top: 1281px !important;
    }

    .team:nth-of-type(20) {
      top: 1351px !important;
    }

    .team:nth-of-type(21) {
      top: 1436px !important;
    }

    .team:nth-of-type(22) {
      top: 1526px !important;
    }

    .team:nth-of-type(23) {
      top: 1576px !important;
    }

    .team:nth-of-type(24) {
      top: 1656px !important;
    }

    .team:nth-of-type(25) {
      top: 1732px !important;
    }

    .team:nth-of-type(26) {
      top: 1774px !important;
    }

    .team:nth-of-type(27) {
      top: 1854px !important;
    }

    .team:nth-of-type(28) {
      top: 1924px !important;
    }

    .team:nth-of-type(29) {
      top: 2009px !important;
    }

    .team:nth-of-type(30) {
      top: 2099px !important;
    }

    .team:nth-of-type(31) {
      top: 2149px !important;
    }

    .team:nth-of-type(32) {
      top: 2229px !important;
    }

    .team:nth-of-type(33) {
      top: 2305px !important;
    }

    .team:nth-of-type(34) {
      top: 2347px !important;
    }

    .team:nth-of-type(35) {
      top: 2427px !important;
    }

    .team:nth-of-type(36) {
      top: 2497px !important;
    }

    .team:nth-of-type(37) {
      top: 2582px !important;
    }

    .team:nth-of-type(38) {
      top: 2672px !important;
    }

    .team:nth-of-type(39) {
      top: 2722px !important;
    }

    .team:nth-of-type(40) {
      top: 2802px !important;
    }

    .team:nth-of-type(41) {
      top: 2878px !important;
    }

    .team:nth-of-type(42) {
      top: 2920px !important;
    }

    .team:nth-of-type(43) {
      top: 3000px !important;
    }

    .team:nth-of-type(44) {
      top: 3070px !important;
    }

    .team:nth-of-type(45) {
      top: 3155px !important;
    }

    .team:nth-of-type(46) {
      top: 3245px !important;
    }

    .team:nth-of-type(47) {
      top: 3295px !important;
    }

    .team:nth-of-type(48) {
      top: 3375px !important;
    }

    .team:nth-of-type(49) {
      top: 3451px !important;
    }

    .team:nth-of-type(50) {
      top: 3493px !important;
    }

    .team:nth-of-type(51) {
      top: 3573px !important;
    }

    .team:nth-of-type(52) {
      top: 3643px !important;
    }

    .team:nth-of-type(53) {
      top: 3728px !important;
    }

    .team:nth-of-type(54) {
      top: 3818px !important;
    }

    .team:nth-of-type(55) {
      top: 3868px !important;
    }

    .team:nth-of-type(56) {
      top: 3948px !important;
    }

    .team:nth-of-type(57) {
      top: 4024px !important;
    }

    .team:nth-of-type(58) {
      top: 4066px !important;
    }

    .team:nth-of-type(59) {
      top: 4146px !important;
    }

    .team:nth-of-type(60) {
      top: 4216px !important;
    }

    .team:nth-of-type(61) {
      top: 4301px !important;
    }

    .team:nth-of-type(62) {
      top: 4391px !important;
    }

    .team:nth-of-type(63) {
      top: 4441px !important;
    }

    .team:nth-of-type(64) {
      top: 4521px !important;
    }

    .team:nth-of-type(65) {
      top: 4597px !important;
    }

    .team:nth-of-type(66) {
      top: 4639px !important;
    }

    .team:nth-of-type(67) {
      top: 4719px !important;
    }

    .team:nth-of-type(68) {
      top: 4789px !important;
    }

    .team:nth-of-type(69) {
      top: 4874px !important;
    }

    .team:nth-of-type(70) {
      top: 4964px !important;
    }

    .team:nth-of-type(71) {
      top: 5014px !important;
    }

    .team:nth-of-type(72) {
      top: 5094px !important;
    }

    .team:nth-of-type(73) {
      top: 5170px !important;
    }

    .team:nth-of-type(74) {
      top: 5212px !important;
    }

    .team:nth-of-type(75) {
      top: 5292px !important;
    }


    .all-of-them {
      height: 5450px;
    }



    .team:nth-child(2),
    .team:nth-child(8n+2) {
      width: 27%;
      left: 52%;
    }

    .team:nth-child(4),
    .team:nth-child(8n+4) {
      width: 27%;
      left: 57%;
    }

    .team:nth-child(6),
    .team:nth-child(8n+6) {
      width: 20%;
      left: 58%;
    }

    .team:nth-child(8),
    .team:nth-child(8n+8) {
      width: 22%;
      left: 60%;
    }

    .team:first-child,
    .team:nth-child(8n+1) {
      width: 19%;
      left: 26%;
    }

    .team:nth-child(3),
    .team:nth-child(8n+3) {
      width: 27%;
      left: 19%;
    }

    .team:nth-child(7),
    .team:nth-child(8n+7) {
      width: 31%;
      left: 24%;
    }



  }

有什么想法可以做到这一点吗？

2 个答案:

答案 0 :(得分：0)

如果您也共享html脚本会更好。 但是我想您可以使用CSS的“ float”属性来制作所需的内容。 当“ float：left;”时添加到所有过滤器元素的样式中，当其中之一被隐藏时，它们将开始移至较高位置。

这是一个基于我对html的假设的简单示例：

$(document).ready(function() {
  $("#btnFilter").click(function() {
    $('#item1').hide();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="containerDiv" style="width:200px; height:100px; border:1px solid black; padding:1%">
  <div id="imageDiv" style="width:40%; border:1px solid black; float:left; height:100%"> image div</div>
  <div id="imageDiv" style="width:40%; border:1px solid black; float:left; margin-left:5%; padding:5%; height:80%">
    <div id="item1" style="width:90%; height:20; border:1px solid black; float:left;">item 1</div>
    <div id="item2" style="width:90%; height:20; border:1px solid black; float:left; margin-top:5%">item 2</div>
    <div id="item3" style="width:90%; height:20; border:1px solid black; float:left; margin-top:5%">item 3</div>
  </div>
</div>
<input type="button" id="btnFilter" value="Let be filter" style="margin-top:20px" />

希望这会有所帮助！

答案 1 :(得分：0)

您的绝对位置属性是left和top。因此，您将知道top和left的最小可能值是多少。定义一个topInitial，leftInitial，topOffset和一个leftOffset变量，它们将包含初始值以及两个变量top和left之间的差后续要显示的元素。现在，假设您有一个visibleElements变量来保存要显示的元素。在这种情况下，您可以使用以下算法：

var currentTop = initialTop;
var currentLeft = initialLeft;
var current
for (var visibleElement of visibleElements) {
    visibleElement.css('left', currentLeft + 'px').css('top', currentTop + 'px');
    currentLeft += leftOffset;
    currentTop += topOffset;
}
相关问题
最新问题