zoukankan      html  css  js  c++  java
  • [Jquery]瀑布流

    $(window).load(function(e){
        waterfall();
        var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
        $(window).scroll(function(){
            if(checkscrollside()){
                var $main=$("#main");
                $.each(dataInt.data,function(i){
                    var $oPin=$('<div>').addClass("pin").appendTo($main);
                    var $oBox=$('<div>').addClass("box").appendTo($oPin);
                    var $oImg=$('<img>');
                    $oImg.attr("src",'./images/'+$(this).attr("src")).appendTo($oBox);
                });
                waterfall();
            };
        });
        
        function waterfall(){
            var $main=$("#main");
            var $box=$(".box");
            var $pin=$(".pin");
            var $img=$pin.find("img");
            var pinw=$pin.eq(0).outerWidth();
            var ww=$(window).width();
            var col=Math.floor(ww/pinw);
            $main.css({"width":col*pinw,"margin":"0 auto"});
            var pinArr=[];       //定义数组不需要美元符
            $pin.each(function(i) {
                var pinh=$pin.eq(i).outerHeight();
                if(i<col){
                    pinArr[i]=pinh;
                }else{
                    var minH=Math.min.apply( null,pinArr);
                    var index=$.inArray(minH,pinArr);   //确定第一个参数在数组中的位置
                    var pinl=$pin.eq(index).position().left;       //用.offset().left会有15偏差
                    $(this).css({"position":"absolute","top":minH,"left":pinl});
                    pinArr[index]+=$pin.eq(i).outerHeight();
                }
            });
        }

        function checkscrollside(){
            var $pin=$(".pin");
            var documentH=$(document).height();
            var scrollTop=$(window).srcollTop();
            var lastpinH=$pin.eq($pin.length-1).offset().top+Math.floor($pin.eq($pin.length-1).outerHeight()/2);
            return(lastpinH<documentH+scrollTop)?true:false;
        }    
    })

  • 相关阅读:
    Typekit在线字库及使用方法
    SVG基础图形和D3.js
    CSS3 媒体查询@media 查询(响应式布局)
    Bootstrap 栅格系统(布局)
    CSS——图片替换方法:Fahrner图片替换法(FIR)
    CSS sprites(css 精灵):将小图标整合到一张图片上
    [html]点击button后画面被刷新原因:未设置type="button"
    [java]No qualifying bean of type 解决方法
    [eclipse]eclipse设置条件断点Breakpoint Properties
    Intent的setFlag和addFlag有什么区别?
  • 原文地址:https://www.cnblogs.com/zhangwenkan/p/3885426.html
Copyright © 2011-2022 走看看