html头条新闻样式,请问今日头条图片频道布局样式如何实现的？

Title

*{

margin: 0;

padding: 0;

}

ul,li{

list-style: none;

}

.middle {

width: 136px;

height: 136px;

}

.right {

float: right;

}

.small {

width: 100px;

height: 67px;

margin-bottom: 2px;

}

.left {

float: left;

}

.large {

width: 238px;

height: 136px;

}

.imgLi {

float: left;

width: 238px;

height: 136px;

margin: 0 6px;

margin-bottom: 46px;

}

.imgList{

width: 1000px;

margin: 20px auto;

}

.clearfix{

display: block;

}

.clearfix:after{

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.image-wrap>img {

width: 100%;

height: 100%;

}

• 

  

  

• 

• 

  

  

• 

  

  

• 

• 

  

  

function randomsort() {

return Math.random()>.5 ? -1 : 1;

}

function changeLi(){

var arrLi=[];

var d=document;

var q=d.querySelectorAll('.imgLi');

var l=q.length;

for(var i=0;i

arrLi.push(q[i].innerHTML);

}

arrLi.sort(randomsort);

for(var i=0;i

q[i].innerHTML=arrLi[i];

}

}

changeLi()

这个可以实现刷新换排序的，至于三个图片的位置样式 想办法php判断吧