• 人民网评:异地医保的步子还需更大一些 2019-07-18
  • 敢想敢拼的邹市明:用奥运精神助推青少年体育事业发展 2019-07-13
  • 改革开放40年——从全国糖酒会看酒业跌宕起伏酒业 中国 2019-07-13
  • 这三个史无前例,让美国有点懵了 2019-07-11
  • 文创大咖齐聚成都 共话“一带一路”文化交流 2019-07-06
  • 农历五月初二 唐代高僧雪峰义存禅师圆寂纪念日 2019-07-06
  • 山西与腾讯公司签署战略合作协议 2019-07-04
  • 山西:“四好农村路” 致富添门路 2019-07-02
  • 【专题】社会主义核心价值观主题微电影优秀作品展示 2019-07-02
  • 《钟馗捉妖记》杨旭文为魔族惨烈“献身” 2019-06-10
  • 个税法迎第七次大修 起征点由每月3500元提高至5000元 2019-06-10
  • 摄影师捕捉超强EF3龙卷风 巨大云团画面惊险壮观 2019-05-26
  • 农民夜校成十九大精神宣讲重要课堂 2019-05-25
  • 拆迁款分配引冲突 儿子推倒八旬老父致其死亡 2019-05-25
  • 2017年邵逸夫奖在港颁奖 5位科学家获此殊荣 2019-05-23
  • 代理加盟 2019全新代理计划 赚钱+省钱双管齐下,独立平台,丰厚利润!

    您现在的位置: 11选5任四包赚不赔40注 > 站长学院 > 建站教程 >

    山西11选五任5遗漏号码:网页模板实现瀑布流效果代码

    来源:未知 发布时间:2019-03-30热度: ℃我要评论
    对于WEB前端工程师来说,把网站拥有更好的用户体验度,能让用户停留时间,增加PV。现在的网页设计更大气、新颖,就如本站的图片浏览模式,其实就是经典的瀑布流布局,利用的是循环调用后绝对定位的方法,把代码贴出来给大家分享 HTML部分 p id=pbl ul {dede:list pages...

    11选5任四包赚不赔40注 www.zo-n.com

    网页设计瀑布流效果js代码

           对于WEB前端工程师来说,把网站拥有更好的用户体验度,能让用户停留时间,增加PV。现在的网页设计更大气、新颖,就如本站的图片浏览模式,其实就是经典的瀑布流布局,利用的是循环调用后绝对定位的方法,把代码贴出来给大家分享

    HTML部分

        <p id="pbl">
         <ul>
          {dede:list pagesize='18' titlen='20'}
          <li>
           <p class="pblcon">
            <a title="[field:title/]"href="[field:arcurl/]">
             <img src='[field:litpic/]' alt='[field:title/]'/>
             <p class="bj"></p>
             <p>[field:title/]</p>
            </a>
           </p>
          </li>
          {/dede:list}
         </ul>
        </p>
        <p class="pages">
         <ul>
          {dede:pagelist listitem='info,index,end,pre,next,pageno' listsize='5'/}
          <p class="clear"></p>
         </ul>
        </p>
       </p>
      <!--end-->
     </p>
    <script type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/jquery.js"></script>
    <script type="text/javascript">
    $(window).load(function(){
    var len=$("#pbl ul li").length;
    var obj=$("#pbl ul li");
    var i=0;
    var ImgHeight={line1:[],line2:[],line3:[],line4:[]};
    for(i=0;i<len;i++){
    var inew=i%4; //余数是0-第一排  余数1- 第二排  余数2-第三排 余数3- 第四排
    switch(inew){
    case 0 :  //0-第一排 
    obj.eq(i).css({left:"0px"});
    ImgHeight.line1.push(obj.eq(i).height()); //把高度保存到数级里
    var step=Math.floor(i/4);
    if(step==0){
    obj.eq(i).css({top:"0px"});
    }else{
    var j=0;
    var num=0;
    for(j=0;j<step;j++){
    num=num+ImgHeight.line1[j]+10;
    }
    obj.eq(i).css({top:num});
    }
    break;
    case 1 : //1-第二排 
    $("#pbl ul li").eq(i).css({left:"270px"});
    ImgHeight.line2.push(obj.eq(i).height());
    var step=Math.floor(i/4);
    if(step==0){
    obj.eq(i).css({top:"0px"});
    }else{
    var j=0;
    var num=0;
    for(j=0;j<step;j++){
    num=num+ImgHeight.line2[j]+10;
    }
    obj.eq(i).css({top:num});
    }
    break;
    case 2 : //2-第三排 
    $("#pbl ul li").eq(i).css({left:"540px"});
    ImgHeight.line3.push(obj.eq(i).height());
    var step=Math.floor(i/4);
    if(step==0){
    obj.eq(i).css({top:"0px"});
    }else{
    var j=0;
    var num=0;
    for(j=0;j<step;j++){
    num=num+ImgHeight.line3[j]+10;
    }
    obj.eq(i).css({top:num});
    }
    break;
    case 3 : //3-第四排 
    $("#pbl ul li").eq(i).css({left:"810px"});
    ImgHeight.line4.push(obj.eq(i).height());
    var step=Math.floor(i/4);
    if(step==0){
    obj.eq(i).css({top:"0px"});
    }else{
    var j=0;
    var num=0;
    for(j=0;j<step;j++){
    num=num+ImgHeight.line4[j]+10;
    }
    obj.eq(i).css({top:num});
    }
    break;
    }
    }
    });
    </script>

    样式部分

    /*瀑布流样式*/
    #pbl{width:auto;height:1180px;margin:0 auto;position:relative}
    #pbl ul li{position:absolute}
    .pblcon{position:relative;}
    .pblcon a{display:block;color:#fff}
    .pblcon img{width:260px;height:auto}
    .pblcon p{position:absolute;bottom:0;left:0;width:100%;height:26px;font-size:14px;line-height:26px;}
    .pblcon .bj{position:absolute;bottom:0;left:0;width:100%;height:26px;background:#000;opacity: .5;filter: alpha(opacity=50);-moz-opacity: .5;-khtml-opacity: .5;}

           这样的实现方法比较简单,但是不能做到自适应。本站的是根据用户使用的平台PC或者移动端屏幕尺寸而做相应的自适应CSS样式。最优自适应的瀑布流下载链接://pan.baidu.com/s/1nusgaZR 密码:t44g

    自适应瀑布流网页效果下载

    本文地址://www.zo-n.com/news/1437.html

      发表评论

      评论列表(条)

      • 人民网评:异地医保的步子还需更大一些 2019-07-18
      • 敢想敢拼的邹市明:用奥运精神助推青少年体育事业发展 2019-07-13
      • 改革开放40年——从全国糖酒会看酒业跌宕起伏酒业 中国 2019-07-13
      • 这三个史无前例,让美国有点懵了 2019-07-11
      • 文创大咖齐聚成都 共话“一带一路”文化交流 2019-07-06
      • 农历五月初二 唐代高僧雪峰义存禅师圆寂纪念日 2019-07-06
      • 山西与腾讯公司签署战略合作协议 2019-07-04
      • 山西:“四好农村路” 致富添门路 2019-07-02
      • 【专题】社会主义核心价值观主题微电影优秀作品展示 2019-07-02
      • 《钟馗捉妖记》杨旭文为魔族惨烈“献身” 2019-06-10
      • 个税法迎第七次大修 起征点由每月3500元提高至5000元 2019-06-10
      • 摄影师捕捉超强EF3龙卷风 巨大云团画面惊险壮观 2019-05-26
      • 农民夜校成十九大精神宣讲重要课堂 2019-05-25
      • 拆迁款分配引冲突 儿子推倒八旬老父致其死亡 2019-05-25
      • 2017年邵逸夫奖在港颁奖 5位科学家获此殊荣 2019-05-23
      • 广东好彩1开奖查询 香港两码中特马 蓝球胜分差怎么玩 2019双色球117期红彩网 今天甘肃快三开奖查询 小狼狗心水论坛 北单高手靠什么赚钱 乒乓球教学视频直拍发球慢动作 河北十一选五遗漏查询 重庆时时彩后一技巧 浙江6十1开奖号码查询结果 彩票走势图大全免费版 贵州快三即时软件下载 体彩胜平负任选9场 体育竞猜