色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

暴露所有沒(méi)有大空間燈箱js和磚石的畫(huà)廊項(xiàng)目

CSS

我正在嘗試使用燈箱js和磚石為基礎(chǔ)的畫(huà)廊

我連接一切，并添加元素，2個(gè)視頻和6個(gè)圖像

輸出時(shí)，一切正常，左邊是2個(gè)視頻，然后是圖像

但是出于某種原因，所有的東西都是以這樣一種方式設(shè)置的，視頻和圖像之間有太多的縮進(jìn)

有沒(méi)有可能讓圖像在視頻之后立即顯示，而沒(méi)有這么大的間隙？？

let masonryGrid = $('.masonry-grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});
setTimeout(function() {
  masonryGrid.masonry('layout')
}, 200);
setTimeout(function() {
  masonryGrid.masonry('layout')
}, 1000);
setTimeout(function() {
  masonryGrid.masonry('layout')
}, 3000);

.masonry-grid {
  margin: 30px 20px 20px;
}
.grid-item, .grid-sizer {
  float: left; width: 20%;
  padding: 10px;
}
.grid-item div {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px 0 blue;
}
.grid-item img {
  width: 100%;
  border-radius: 5px;
}
.grid-item iframe {
  margin: 0 0 -5px;
  width: 100%;
  border-radius: 10px;
}
.grid-item--width2 {
  width: 41%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link  rel="stylesheet"
          integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet"  integrity="sha512-Woz+DqWYJ51bpVk5Fv0yES/edIMXjj3Ynda+KWTIkGoynAMHrqTcDUQltbipuiaD5ymEo9520lyoVOo9jCQOCA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="masonry-grid" data-ma-sonry="{ 'itemSelector': '.grid-item'}" style="position: relative; height:640px;">
    <div class="grid-item grid-item--width2 " style="position: absolute;">
        <div><iframe src="https://youtube.com/embed/HXzB99HCru4/" allowfullscreen="allowfullscreen"></iframe></div>
    </div>
    <div class="grid-item grid-item--width2 " style="position: absolute;">
        <div><iframe src="https://youtube.com/embed/Jb6CBwreea8/" allowfullscreen="allowfullscreen"></iframe></div>
    </div>
    <div class="grid-item" style="position: absolute;">
        <div><a  data-lightbox="image-1" data-title="Image 1"><img src="https://i.imgur.com/xPZSJ3n.jpg" alt=""></a></div>
    </div>
    <div class="grid-item" style="position: absolute;">
        <div><a  data-lightbox="image-1" data-title="Image 2"><img src="https://i.imgur.com/vebNRcv.jpg" alt=""></a></div>
    </div>
    <div class="grid-item" style="position: absolute;">
        <div><a  data-lightbox="image-1" data-title="Image 3"><img src="https://i.imgur.com/d9cmnm9.jpg" alt=""></a></div>
    </div>
    <div class="grid-item" style="position: absolute;">
        <div><a  data-lightbox="image-1" data-title="Image 4"><img src="https://i.imgur.com/xPZSJ3n.jpg" alt=""></a></div>
    </div>
    <div class="grid-item" style="position: absolute;">
        <div><a  data-lightbox="image-1" data-title="Image 5"><img src="https://i.imgur.com/vebNRcv.jpg" alt=""></a></div>
    </div>
    <div class="grid-item" style="position: absolute;">
        <div><a  data-lightbox="image-1" data-title="Image 6"><img src="https://i.imgur.com/d9cmnm9.jpg" alt=""></a></div>
    </div>
    <div class="grid-sizer"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha512-JRlcvSZAXT8+5SQQAvklXGJuxXTouyq8oIMaYERZQasB8SBDHZaUbeASsJWpk0UUrf89DP3/aefPPrlMR1h1yQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.js" integrity="sha512-MBa5biLyZuJEdQR7TkouL0i1HAqpq8lh8suPgA//wpxGx4fU1SGz1hGSlZhYmm+b7HkoncCWpfVKN3NDcowZgQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

更改CSS

.grid-item, .grid-sizer {
  width: 20%;  /* Change Here*/
  padding: 10px;
}
.grid-item div {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px 0 blue;
}
.grid-item img {
  width: 100%;
  border-radius: 5px;
}
.grid-item iframe {
  margin: 0 0 -5px;
  width: 100%;
  border-radius: 10px;
}
.grid-item--width2 {
  width: 60%; /* Change Here*/
}

let masonryGrid = $('.masonry-grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});
setTimeout(function() {
  masonryGrid.masonry('layout')
}, 200);
setTimeout(function() {
  masonryGrid.masonry('layout')
}, 1000);
setTimeout(function() {
  masonryGrid.masonry('layout')
}, 3000);

.masonry-grid {
  margin: 30px 20px 20px;
}
.grid-item, .grid-sizer {
  width: 20%;
  padding: 10px;
}
.grid-item div {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px 0 blue;
}
.grid-item img {
  width: 100%;
  border-radius: 5px;
}
.grid-item iframe {
  margin: 0 0 -5px;
  width: 100%;
  border-radius: 10px;
}
.grid-item--width2 {
  width: 60%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link  rel="stylesheet"
          integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet"  integrity="sha512-Woz+DqWYJ51bpVk5Fv0yES/edIMXjj3Ynda+KWTIkGoynAMHrqTcDUQltbipuiaD5ymEo9520lyoVOo9jCQOCA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="masonry-grid" data-ma-sonry="{ 'itemSelector': '.grid-item'}" style="position: relative; height:640px;">
    <div class="grid-item grid-item--width2">
        <div><iframe src="https://youtube.com/embed/HXzB99HCru4/" allowfullscreen="allowfullscreen"></iframe></div>
    </div>
    <div class="grid-item grid-item--width2">
        <div><iframe src="https://youtube.com/embed/Jb6CBwreea8/" allowfullscreen="allowfullscreen"></iframe></div>
    </div>
    <div class="grid-item">
        <div><a  data-lightbox="image-1" data-title="Image 1"><img src="https://i.imgur.com/xPZSJ3n.jpg" alt=""></a></div>
    </div>
    <div class="grid-item">
        <div><a  data-lightbox="image-1" data-title="Image 2"><img src="https://i.imgur.com/vebNRcv.jpg" alt=""></a></div>
    </div>
    <div class="grid-item">
        <div><a  data-lightbox="image-1" data-title="Image 3"><img src="https://i.imgur.com/d9cmnm9.jpg" alt=""></a></div>
    </div>
    <div class="grid-item">
        <div><a  data-lightbox="image-1" data-title="Image 4"><img src="https://i.imgur.com/xPZSJ3n.jpg" alt=""></a></div>
    </div>
    <div class="grid-item">
        <div><a  data-lightbox="image-1" data-title="Image 5"><img src="https://i.imgur.com/vebNRcv.jpg" alt=""></a></div>
    </div>
    <div class="grid-item">
        <div><a  data-lightbox="image-1" data-title="Image 6"><img src="https://i.imgur.com/d9cmnm9.jpg" alt=""></a></div>
    </div>
    <div class="grid-sizer"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha512-JRlcvSZAXT8+5SQQAvklXGJuxXTouyq8oIMaYERZQasB8SBDHZaUbeASsJWpk0UUrf89DP3/aefPPrlMR1h1yQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.js" integrity="sha512-MBa5biLyZuJEdQR7TkouL0i1HAqpq8lh8suPgA//wpxGx4fU1SGz1hGSlZhYmm+b7HkoncCWpfVKN3NDcowZgQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

這是由于在一個(gè)布局中使用了一些CSS和混合內(nèi)容。 你需要分割視頻和圖像幀。

在下面的例子中，我去掉了。grid-item - width2 {}并更改為50%的篩選器grid-sizer。這在所有元素之間都工作得很好。

let masonryGrid = $('.masonry-grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});
setTimeout(function() {
  masonryGrid.masonry('layout')
}, 200);

.masonry-grid {
  margin: 30px 20px 20px;
}
.grid-item, .grid-sizer {
  float: left; 
  padding: 10px;
  width: 50%;
}
.grid-item div {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px 0 blue;
}
.grid-item img {
  width: 100%;
  border-radius: 5px;
}
.grid-item iframe {
  margin: 0 0 -5px;
  width: 100%;
  border-radius: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link  rel="stylesheet"
          integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet"  integrity="sha512-Woz+DqWYJ51bpVk5Fv0yES/edIMXjj3Ynda+KWTIkGoynAMHrqTcDUQltbipuiaD5ymEo9520lyoVOo9jCQOCA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="masonry-grid" data-ma-sonry="{ 'itemSelector': '.grid-item'}" style="position: relative; height:640px;">
    <div class="grid-item grid-item--width2 " style="position: absolute;">
        <div><iframe src="https://youtube.com/embed/HXzB99HCru4/" allowfullscreen="allowfullscreen"></iframe></div>
    </div>
    <div class="grid-item grid-item--width2 " style="position: absolute;">
        <div><iframe src="https://youtube.com/embed/Jb6CBwreea8/" allowfullscreen="allowfullscreen"></iframe></div>
    </div>
    <div class="grid-item" style="position: absolute;">
        <div><a  data-lightbox="image-1" data-title="Image 1"><img src="https://i.imgur.com/xPZSJ3n.jpg" alt=""></a></div>
    </div>
    <div class="grid-item" style="position: absolute;">
        <div><a  data-lightbox="image-1" data-title="Image 2"><img src="https://i.imgur.com/vebNRcv.jpg" alt=""></a></div>
    </div>
    <div class="grid-item" style="position: absolute;">
        <div><a  data-lightbox="image-1" data-title="Image 3"><img src="https://i.imgur.com/d9cmnm9.jpg" alt=""></a></div>
    </div>
    <div class="grid-item" style="position: absolute;">
        <div><a  data-lightbox="image-1" data-title="Image 4"><img src="https://i.imgur.com/xPZSJ3n.jpg" alt=""></a></div>
    </div>
    <div class="grid-item" style="position: absolute;">
        <div><a  data-lightbox="image-1" data-title="Image 5"><img src="https://i.imgur.com/vebNRcv.jpg" alt=""></a></div>
    </div>
    <div class="grid-item" style="position: absolute;">
        <div><a  data-lightbox="image-1" data-title="Image 6"><img src="https://i.imgur.com/d9cmnm9.jpg" alt=""></a></div>
    </div>
    <div class="grid-sizer"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" integrity="sha512-JRlcvSZAXT8+5SQQAvklXGJuxXTouyq8oIMaYERZQasB8SBDHZaUbeASsJWpk0UUrf89DP3/aefPPrlMR1h1yQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.js" integrity="sha512-MBa5biLyZuJEdQR7TkouL0i1HAqpq8lh8suPgA//wpxGx4fU1SGz1hGSlZhYmm+b7HkoncCWpfVKN3NDcowZgQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>