84669 orang belajar
152542 orang belajar
20005 orang belajar
5487 orang belajar
7821 orang belajar
359900 orang belajar
3350 orang belajar
180660 orang belajar
48569 orang belajar
18603 orang belajar
40936 orang belajar
1549 orang belajar
1183 orang belajar
32909 orang belajar
今日头条图片频道 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判断吧