javascript - 请问今日头条图片频道布局样式如何实现的?
阿神
阿神 2017-04-11 12:45:55
0
2
894

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

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

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

阿神
阿神

闭关修行中......

모든 응답(2)
PHPzhong

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

巴扎黑

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

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿