使用Javascript动态网格显示

Question

我正在尝试显示从服务器获取的一些数据这个数据是动态的，我正在使用Javascript。我做了这个tas但是有桌子，所以我有一个很长的列表，不能容易用户体验。

我希望有以下网格显示：

对于diplaying动态表我使用以下代码。 somoene可以告诉我如何更改代码以使网格显示在其下面有图像和文本，就像在第二个图像中一样。谢谢。 ：

function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {

    var obj = JSON.parse(this.responseText);

  var html = "<table border='1|1'>";


  for (var i = 0; i < obj.response.length; i++) {
          html+="<tr>";
          html+="<td>"+obj.response[i].id+"</td>";
          html+="<td>"+obj.response[i].restaurant_id+"</td>";
          html+="<td>"+obj.response[i].name+"</td>";

         html+="<td>"+'<img src="http://URL/' + obj.response[i].img + '" class="img-responsive" width="100" height="80"/>'+"</td>";

          html+="</tr>";

       }

   html+="</table>";
  $("#demo").html(html);
}

  };
  xhttp.open("GET", "http://URL", true);
  xhttp.send();

}

<div class="col-sm-6"> <!--Div for displaying menye-->
    <h1>Display the menu</h1>
  <button type="button" onclick="loadDoc()" class="btn btn-primary">Menue</button>
         <table class="table table-striped" class="img-responsive">
                  <thead>
                      
                  </thead>
                  <tbody id="demo"></tbody>
          </table>
    </div>