简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 请问今日头条图片频道布局样式如何实现的？
阿神
阿神 2017-04-11 12:45:55
0
2
879

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

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

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

阿神
阿神

闭关修行中......

모든 응답(2)
PHPzhong
PHPzhong2017-04-11 12:47:55 2층

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

좋다 +0
답글 추가
巴扎黑
巴扎黑2017-04-11 12:47:55 1층

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

좋다 +0
답글 추가
인기 주제
더>
인기 기사
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！