当前位置:首页 > 网页特效 > 图片特效 >

美女瀑布流-jquery代码

时间:2014-05-30 08:36 来源:互联网 作者:源码搜藏 收藏 推荐

运行代码 保存代码 复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
  • 网上一款流行的瀑布流效果代码,美女瀑布流,基于jquery插件实现,美女图片自动高度适应的一种布局,目前的瀑布流大多都是这种布局风格,经测试,兼容IE8浏览器,同时在火狐、Chrome、Opera、Safari下都有完美表现。
  • <script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
    $(function(){
    function loadMeinv(){
    var data = 0;
    for(var i=0;i<9;i++){//每次加载时模拟随机加载图片
    data = parseInt(Math.random()*9);
    var html = "";
    html = '<li><img src = http://www.codefans.net/jscss/demoimg/201405/-'
    +data+'.jpg><p>src='
    +data+'.jpg</p></li>';
    $minUl = getMinUl();
    $minUl.append(html);
    }
    }
    loadMeinv();
    $(window).on("scroll",function(){
    $minUl = getMinUl();
    if($minUl.height() <= $(window).scrollTop()+$(window).height()){
    //当最短的ul的高度比窗口滚出去的高度+浏览器高度大时加载新图片
    loadMeinv();
    }
    })
    function getMinUl(){//每次获取最短的ul,将图片放到其后
    var $arrUl = $("#container .col");
    var $minUl =$arrUl.eq(0);
    $arrUl.each(function(index,elem){
    if($(elem).height()<$minUl.height()){
    $minUl = $(elem);
    }
    });
    return $minUl;
    }
    })
    </script>
由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-pic/8133.html

图片特效下载排行

最新文章