今日头条图片频道 toutiao.com/news_image
今日头条的图片布局样式就是下面这种，我只截取了两个，看了下好像是随机的样式（3个图样式，1个图样式）
请问怎样用php实现呢（或者说怎样用php输出不同的样式？什么时候输出三个图的样式？什么时候输出一个图样式，还是随机输出[随机输出一般刷新网页样式就变了]）？
闭关修行中......
图片分了三种样式，.small .middle .large每种样式已经固定了宽高三个图的，.middle样式左浮动，.small样式两个右浮动图片布局就这样
.small
.middle
.large
<!DOCTYPE html><html lang="zh-cn"><head>
<meta charset="UTF-8"> <title>Title</title> <style> *{ 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%; } </style>
</head><body><p id="pagelet-imgfeed"><ul class="imgList clearfix">
<li class="img-item imgLi"> <p class="image-wrap middle left"> <img src="http://p3.pstatp.com/list/364x360/c5b0003fe4f1dbe0562" alt=""> </p> <p class="image-wrap small right"> <img src="http://p3.pstatp.com/list/272x178/c5e0000d19895a6fc80" alt=""> </p> <p class="image-wrap small right"> <img src="http://p9.pstatp.com/list/272x178/c5d0004018e659f730a" alt=""> </p> </li> <li class="img-item imgLi"> <p class="image-wrap large"> <img src="http://p3.pstatp.com/list/640x360/e4a0001fad9398c9b9e" alt=""> </p> </li> <li class="img-item imgLi"> <p class="image-wrap middle left"> <img src="http://p3.pstatp.com/list/364x360/c5b0003fe4f1dbe0562" alt=""> </p> <p class="image-wrap small right"> <img src="http://p3.pstatp.com/list/272x178/c5e0000d19895a6fc80" alt=""> </p> <p class="image-wrap small right"> <img src="http://p9.pstatp.com/list/272x178/c5d0004018e659f730a" alt=""> </p> </li> <li class="img-item imgLi"> <p class="image-wrap middle left"> <img src="http://p3.pstatp.com/list/364x360/c5b0003fe4f1dbe0562" alt=""> </p> <p class="image-wrap small right"> <img src="http://p3.pstatp.com/list/272x178/c5e0000d19895a6fc80" alt=""> </p> <p class="image-wrap small right"> <img src="http://p9.pstatp.com/list/272x178/c5d0004018e659f730a" alt=""> </p> </li> <li class="img-item imgLi"> <p class="image-wrap large"> <img src="http://p3.pstatp.com/list/640x360/e4a0001fad9398c9b9e" alt=""> </p> </li> <li class="img-item imgLi"> <p class="image-wrap middle left"> <img src="http://p3.pstatp.com/list/364x360/c5b0003fe4f1dbe0562" alt=""> </p> <p class="image-wrap small right"> <img src="http://p3.pstatp.com/list/272x178/c5e0000d19895a6fc80" alt=""> </p> <p class="image-wrap small right"> <img src="http://p9.pstatp.com/list/272x178/c5d0004018e659f730a" alt=""> </p> </li>
</ul></p>
<script>
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<l;i++){ arrLi.push(q[i].innerHTML); } arrLi.sort(randomsort); for(var i=0;i<l;i++){ q[i].innerHTML=arrLi[i]; } } changeLi()
</script></body></html>这个可以实现刷新换排序的，至于三个图片的位置样式 想办法php判断吧
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
图片分了三种样式，
.small.middle.large每种样式已经固定了宽高
三个图的，.middle样式左浮动，.small样式两个右浮动
图片布局就这样
<!DOCTYPE html>
<html lang="zh-cn">
<head>
</head>
<body>
<p id="pagelet-imgfeed">
<ul class="imgList clearfix">
</ul>
</p>
<script>
</script>
</body>
</html>
这个可以实现刷新换排序的，至于三个图片的位置样式 想办法php判断吧