recommand.json

{
  "music":[
          {
            "releasetime":"2018年11月24日",
            "title":"某一天，靈夢從此丟失了節操",
            "description":"妖歷2019年11月23日21:9 ，博麗神社巫女竟為10000日元出賣了節操......",
            "reImage":"./resources/images/Konachan.png"
          },
          {
            "releasetime":"2018年11月14日",
            "title":"蕾米莉亞大小姐每一天都威風堂堂",
            "description":"妖歷2019年11月13日20:11 ，蕾米莉亞大小姐又使出了威風堂堂的------抱頭蹲防......",
            "reImage":"./resources/images/Konachan.png"
          },
          {
            "releasetime":"2018年11月12日",
            "title":"某處，⑨-----'幻想鄉最強'",
            "description":"妖歷2019年11月13日21:9 ，琪露諾昂首叉腰，大笑：'我可是最強的'",
            "reImage":"./resources/images/Konachan.png"
          },
          {
            "releasetime":"2018年11月18日",
            "title":"某一天，靈夢家裡發出了一陣慘叫",
            "description":"妖歷2019年11月23日21:9 ，正在山間的閒者，扇掩面，微笑著拿著一萬元......",
            "reImage":"./resources/images/Konachan.png"
          }

          ]
}
 

main.js

//建立一個函式用來新增元素，parent，是父元素，object是要新增的元素的屬性類
function addMusic(parent,obj){

   //建立容器
   var musicCon = document.createElement("div");//建立容器元素
   $(musicCon).addClass("Nekoitem item");//新增樣式類
   var musicA = document.createElement("a");
   $(musicA).attr({href:"#"});//新增屬性
   musicCon.appendChild(musicA);//在容器中新增元素


  //建立時間元素
   var musicReleaseDiv = document.createElement("div");
   $(musicReleaseDiv).addClass("date");
   var iconSpan = document.createElement("span");
   $(iconSpan).addClass("glyphicon glyphicon-send");
   var testI = document.createElement("i");
   testI.textContent = obj.releasetime;
   musicReleaseDiv.appendChild(iconSpan);
   musicReleaseDiv.appendChild(testI);


   //建立標題
   var musicTitleDiv = document.createElement("div");
   $(musicTitleDiv).addClass("title");
   musicTitleDiv.textContent = obj.title;

   //建立描述
   var musicDescriptionDiv = document.createElement("div");
   $(musicDescriptionDiv).addClass("sim-con");
   musicDescriptionDiv.textContent = obj.description;


  //建立影象
   var musicReImageDiv = document.createElement("div");
   $(musicReImageDiv).addClass("sim-img");
   var img = document.createElement("img");
   $(img).attr({src:"./resources/images/Konachan.png"});
   musicReImageDiv.appendChild(img);

   //新增元素進容器
   musicA.appendChild(musicReleaseDiv);
   musicA.appendChild(musicTitleDiv);
   musicA.appendChild(musicDescriptionDiv);
   musicA.appendChild(musicReImageDiv);

   //將容器新增到父元素
   parent.appendChild(musicCon);
}

//獲取和新增物件
function getAndAddObjectsByURL(requestURL)
{
    var request = new XMLHttpRequest();
    request.open('GET', requestURL);
    request.responseType = 'json';
    request.send();
    var objectArray;
    request.onload = function() {
       var objectArray = (request.response).music;
       var i = 0;
      for (i in objectArray)
      {

        addMusic($("#music")[0],objectArray[i]);//新增元素

      }


     };

}

alert(1);
var reMusicURL = "https://yuanzhenwen.github.io/crossdomain/recommandJSON.json";

getAndAddObjectsByURL(reMusicURL);
 

main.html 關鍵程式碼

<div class="music clearFloat" id="music">

    <div class="NekoTitle"><span class="pnavItem     glyphicon glyphicon-headphones"></span>音樂</div>

</div>

main.css 關鍵程式碼

.Nekoitem {
  background-color: white;
  border: 1px solid rgba(200, 200, 200, 1)
 
;
  padding: 20px;
  width: 100%;
  border-radius: 2px;
  position: relative;
  bottom: 0;
}

.Nekoitem .date {
  font-size: 10px;
  color: rgba(151, 151, 151, 1);
}

.Nekoitem .date span {
  padding-right: 10px;
}

.Nekoitem .title {
  font-family: '微軟雅黑';
  font-weight: bold;
  font-size: 15px;
}

.Nekoitem .sim-con {
  font-size: 10px;
}

.main-content .item {}
.Nekoitem:hover {
  border-radius: 2px;
  box-shadow: 4px 4px 4px rgba(100,100,100,1);
  bottom:15px;
  transition: bottom 0.3s;

  -moz-transition: bottom 0.3s;
  /* Firefox 4 */
  -webkit-transition: bottom 0.3s;
  /* Safari 和 Chrome */
  -o-transition: bottom 0.3s;
  /* Opera */


}
.Nekoitem:hover img {
  filter: brightness(90%);
}
.recommend {
  margin-top: 50px;
}

.NekoTitle {
  background-color: white;
  border: 1px solid rgba(200, 200, 200, 1);
  padding: 10px 20px;
  font-size: 12px;
  color: rgba(100, 100, 100, 1);
}

.NekoTitle span {
  padding-right: 10px
}

.recommend .item {
  width: 25%;
  float: left;
}

效果圖