完整的谷歌圖片搜索佈局

Question

我發現從http://codepen.io/SitePoint/pen/bNYBZX解決方案，但它不完整。

<section class="image-grid"> 
    <div class="image__cell is-collapsed"> 
    <div class="image--basic"> 
     <a href="#expand-jump-1"> 
     <img id="expand-jump-1" class="basic__img" src="http://lorempixel.com/250/250/fashion/1" alt="Fashion 1" /> 
     </a> 
     <div class="arrow--up"></div> 
    </div> 
    <div class="image--expand"> 
     <a href="#close-jump-1" class="expand__close"></a> 
     <img class="image--large" src="http://lorempixel.com/400/400/fashion/1" alt="Fashion 1" /> 
    </div> 
    </div> 
</section> 

我需要有一個圖庫邊欄加載預覽部分點擊就像谷歌圖片搜索。這裏是我想要做的圖像Google Image search layout preview

謝謝。

Answer 1

我做了我想要的解決方案codepen。 http://codepen.io/bahiirwa/pen/BKmmzm

HTML

<section class="image-grid"> 
    <div class="image__cell is-collapsed"> 
    <div class="image--basic"> 
     <a href="#expand-jump-1"> 
     <img id="expand-jump-1" 
       class="basic__img" 
       src="http://yourdigitalblend.com/wp-content/uploads/2016/03/DB_Team_Bio_jz.png" alt="Fashion 1"> 
     </a> 
     <div class="arrow--up"></div> 
    </div> 
    <div class="image--expand"> 
     <a href="#close-jump-1" class="expand__close"></a> 
     <img class="image--large" 
      src="http://yourdigitalblend.com/wp-content/uploads/2016/03/DB_Team_Bio_jz.png" alt="Fashion 1"> 
    </div> 
    </div> 

    <div class="image__cell is-collapsed"> 
    <div class="image--basic"> 
     <a href="#expand-jump-2"> 
     <img id="expand-jump-2" 
       class="basic__img" 
       src="http://yourdigitalblend.com/wp-content/uploads/2016/03/DB_Team_Bio-ed.jpg" alt="Fashion 1"> 
     </a> 
     <div class="arrow--up"></div> 
    </div> 
    <div class="image--expand"> 
     <a href="#close-jump-2" class="expand__close"></a> 
     <img class="image--large" 
      src="http://yourdigitalblend.com/wp-content/uploads/2016/03/DB_Team_Bio-ed.jpg" alt="Fashion 1"> 
    </div> 
    </div> 
    ... 
</section> 

CSS

html {box-sizing: border-box;} 

*, *:before, *:after { box-sizing: inherit; } 

.image-grid { 
    width: 100%; 
    max-width: 1310px; 
    margin: 0 auto; 
    overflow: hidden; 
    padding: 10px 5px 0; 
} 

.image__cell { 
    float: left; 
    position: relative; 
    width: 20%; 
} 

.image--basic { 
    padding: 0 5px; 
} 

.basic__img { 
    display: block; 
    max-width: 100%; 
    height: auto; 
    margin: 0 auto; 
} 

.image__cell.is-collapsed .arrow--up { 
    display: block; 
    height: 10px; 
    width: 100%; 
} 

.image--large { 
    max-width: 100%; 
    height: auto; 
    display: block; 
    padding: 40px; 
    margin: 0 auto; 
    box-sizing: border-box; 
} 

.image__cell.is-collapsed .image--basic { 
    cursor: pointer; 
} 

.image__cell.is-expanded .image--expand { 
    max-height: 500px; 
    margin-bottom: 10px; 
} 

.image--expand { 
    position: relative; 
    left: -5px; 
    padding: 0 5px; 
    box-sizing: content-box; 
    overflow: hidden; 
    background: #222; 
    max-height: 0; 
    transition: max-height .3s ease-in-out, 
       margin-bottom .1s .2s; 
    width: 500%; 
} 

.image__cell:nth-of-type(5n+2) .image--expand { 
    margin-left: -100%; 
} 

.image__cell:nth-of-type(5n+3) .image--expand { 
    margin-left: -200%; 
} 

.image__cell:nth-of-type(5n+4) .image--expand { 
    margin-left: -300%; 
} 

.image__cell:nth-of-type(5n+5) .image--expand { 
    margin-left: -400%; 
} 

.image__cell:nth-of-type(5n+6) { 
    clear: left; 
} 

.image__cell.is-expanded .arrow--up { 
    display: block; 
    border-bottom: 8px solid #222; 
    border-left: 8px solid transparent; 
    border-right: 8px solid transparent; 
    height: 0; 
    width: 0; 
    margin: 2px auto 0; 
} 

.expand__close { 
    position: absolute; 
    top: 10px; 
    right: 20px; 
    color: #454545; 
    font-size: 50px; 
    line-height: 50px; 
    text-decoration: none; 
} 

.expand__close:before { 
    content: '×'; 
} 

.expand__close:hover { 
    color: #fff; 
} 

JS

var $cell = $('.image__cell'); 

$cell.find('.image--basic').click(function() { 
    var $thisCell = $(this).closest('.image__cell'); 

    if ($thisCell.hasClass('is-collapsed')) { 
    $cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed'); 
    $thisCell.removeClass('is-collapsed').addClass('is-expanded'); 
    } else { 
    $thisCell.removeClass('is-expanded').addClass('is-collapsed'); 
    } 
}); 

$cell.find('.expand__close').click(function() { 
    var $thisCell = $(this).closest('.image__cell'); 
    $thisCell.removeClass('is-expanded').addClass('is-collapsed'); 
});