Facebook喜歡圖片庫風格

我正在尋找一個畫廊，我必須在每個相冊類別容器內顯示相冊類別的快照專輯圖標。Facebook喜歡圖片庫風格

下圖是針對每個分類容器內圖像的不同佈局。這與Facebook類似。

我需要顯示最多四個相冊圖標/圖像&最小3個圖像中的每個相冊類別集裝箱。我一直在尋找類似的例子，但不能在互聯網上罰款。

我在codepen上設置了一個例子。對於每張專輯，我必須顯示默認圖像，最重要的是我必須創建網格。

但是，如果我們顯示3圖像，則圖像網格必須位於最少3或4張圖像的拼貼風格網格中，然後左側或右側的圖像顯示爲100英寸高度以佔據容器高度，其他兩個圖像將爲正常高度。

我嘗試了一些東西，但無法弄清楚。

<ul class="cbp-rfgrid"> 
    <!--item--> 

    <li> 
    <a href="albums/6/crisis-relief"> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg"> 
     <div> 
     <h3 class="album-causes-list-h3">Album One </h3> 

     </div> 
    </a> 
    </li> 

    <li> 
    <a> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg"> 
     <div> 
     <h3 class="album-causes-list-h3">Album Two </h3> 

     </div> 
    </a> 
    </li> 

    <li> 
    <a href="albums/5/health"> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg"> 
     <div> 
     <h3 class="album-causes-list-h3">Album Three </h3> 

     </div> 
    </a> 
    </li> 

    <li> 
    <a> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg"> 
     <div> 
     <h3 class="album-causes-list-h3">Album Four </h3> 

     </div> 
    </a> 
    </li> 

    <li> 
    <a> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg"> 
     <div style="position: absolute; height: auto; display: block; background-color: rgba(0, 0, 0, 0);"> 
     <img style="width: 50%; height: 50%; display: block ! important; float: left ! important;" src="http://theologymix.com/wp-content/uploads/2017/01/mountains-600x400.jpg"> 
     <img style="width: 50%; height: 50%; display: block ! important; float: left ! important;" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT1PBMolDgRsyDXiehq5Fth6oECQZMCTQn_5cp8wL8sUPlOsjPM"> 
     <div style="background-color: rgba(0, 0, 0, 0.1); "></div> 

     </div> 

     <div> 
     <h3 class="album-causes-list-h3">Album five </h3> 


     </div> 
    </a> 
    </li> 

    <li> 
    <a> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg"> 
     <div style="position: absolute; background-color: rgba(0, 0, 0, 0.0); height: auto; display: block;"> 
     <img style="width: 50%; height: 50%; display: block ! important; float: left ! important;" src="http://fm.cnbc.com/applications/cnbc.com/resources/img/editorial/2015/03/17/102512937-498619551.600x400.jpg?v=1426619700"> 
     <img style="width: 50%; height: 50%; display: block ! important; float: left ! important;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRx4DXyobeDy3Sw0n9Cm_cS6PGqPb-ivrT1DD4H9HReZRrOJQEk"> 
     <img style="width: 50%; height: 50%; display: block ! important; float: left ! important;" src="http://joannagraham.github.io/img/pictures/8.jpg"> 
     <img style="width: 50%; height: 50%; display: block ! important; float: left ! important;" src="http://fm.cnbc.com/applications/cnbc.com/resources/img/editorial/2016/12/08/104155736-5186314506_6882142ee7_o.600x400.jpg?v=1481234247"> 
     <div style="background-color: rgba(0, 0, 0, 0.2); "></div> 
     </div> 

     <div> 
     <h3 class="album-causes-list-h3">Album Six </h3> 

     </div> 
    </a> 
    </li> 

    <li> 
    <a> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg"> 
     <div> 
     <h3 class="album-causes-list-h3">Album Seven</h3> 
     <span class="cause-count">Albums (0)</span> 
     </div> 
    </a> 
    </li> 

    <li> 
    <a> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/5/5b/India_Gate_600x400.jpg"> 
     <div> 
     <h3 class="album-causes-list-h3">Album EIGHT </h3> 

     </div> 
    </a> 
    </li> 


    <!--item--> 
</ul>

來源

2017-01-29 Learning

什麼簡單的（也許通過for循環），每個圖像標籤隨機分配的圖像URL（DIV /李內），然後讓CSS如何處理這些圖像設計

來源

2017-01-29 09:02:52

力得到你的觀點？ – Learning

我的意思是，你的圖像出現的方式應該由前端CSS和你佈局你的HTML div的方式來控制。這樣做的原因是它是一個可視化的組件。您想要將類分配給標籤，或查詢「.liClass img」，以便在此情況下可以控制其內容爲圖像。如果您已經從數據庫或文件夾創建了一個圖像陣列，您可以通過每個函數通過a顯示您想要通過圖像標記源屬性的任何相冊中的圖像。 –

我並不是故意含糊不清，但在實現這一目標的背景中還有許多事情要做。你必須決定什麼是默認圖像 - 它是張貼到存儲的相冊數據庫中的第一張圖像？它是用戶定義的嗎？您還需要弄清楚某種算法，例如哪個算法可以顯示四個最大或三個最小圖像，以及它們在您的網格中是如何隨機化的，或者哪些準則決定要顯示的圖像。這不僅僅是一個jQuery的問題，這是肯定的。 –

Facebook喜歡圖片庫風格

回答

相關問題