創建自舉網格列動態使用jquery

Question

我要生成的列的自舉網格：CALSS = 「COL-LG-6」 和 「COL-LG-3」。 下面是HTML：

<div class="container"> 
<div class="row"> 
<div class="col-lg-3"> 
    <img src="../dist/images/test-info.png" alt="TEST-PLAN"/> 
</div> 
<div class="col-lg-6"> 
    <img src="../dist/images/test-details.png" alt="TEST-DETAILS"/> 
</div> 
<div class="col-lg-3"> 
    <img src="../dist/images/test-stats.png" alt="TEST-STATS"/> 
</div></div></div> 

但是我想動態生成上述網格，以這樣的方式，當class ="col-lg-6"，它應該顯示與在JSON提到它的正確位置的「TEST-STATS」圖像如下：

var data = [ 
    { 
     "widgetId": "widget_0", 
     "title": "Test Info", 
     "description": "", 
     "type": "info", 
     "dataType": "TEST_INFO", 
     "position": { 
      "col": 1, 
      "row": 1, 
      "size_x": 1, 
      "size_y": 4 
     } 
    }, 
    { 
     "widgetId": "widget_1", 
     "title": "Test Details", 
     "description": "", 
     "type": "info", 
     "dataType": "TEST_DETAILS", 
     "position": { 
      "col": 2, 
      "row": 1, 
      "size_x": 2, 
      "size_y": 4 
     } 
    }, 
    { 

    "widgetId": "widget_2", 
    "title": "Test Stats", 
    "description": "", 
    "type": "info", 
    "dataType": "TEST_STATS", 
    "position": { 
      "col": 4, 
      "row": 1, 
      "size_x": 1, 
      "size_y": 4 
       } 
}] 

每一個形象，都有自己的位置來呈現，所以條件語句，如：

if(class=="col-lg-6") 
{//display image as 'TEST-DETAILS'} 

如何創建動態模板，並寫一個JavaScript函數循環的類和顯示圖像根據位置？

謝謝！

Answer 1

有一個很多例子互聯網上。

其中一個是我用過的最好的是：http://onepcssgrid.mattimling.com/

這是很輕，強大的足以讓很多謨的。

您還可以檢查jQuery的API來找到你所需要的，檢查是否存在類，變化幅度等...但通常你不應該，因爲它是「巨大的」白白操作。