Home > Q&A > body text

javascript - 请问今日头条图片频道布局样式如何实现的？

今日头条图片频道 toutiao.com/news_image

今日头条的图片布局样式就是下面这种，我只截取了两个，看了下好像是随机的样式（3个图样式，1个图样式）

请问怎样用php实现呢（或者说怎样用php输出不同的样式？什么时候输出三个图的样式？什么时候输出一个图样式，还是随机输出[随机输出一般刷新网页样式就变了]）？

阿神2816 days ago916

reply all(2)I'll reply

PHPz2017-04-11 12:47:55

图片分了三种样式，.small .middle .large
每种样式已经固定了宽高
三个图的，.middle样式左浮动，.small样式两个右浮动
图片布局就这样

巴扎黑2017-04-11 12:47:55

<!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>

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判断吧

Cancelreply