                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /瀑布流布局

求答案源码。

虽然同学代码里有一个能用的，能达到类似效果的，可是却写的有点不伦不类，看不懂。求标准源代码。

Bang丶

2015-11-01

源自：瀑布流布局 5-2

关注问题我要回答

1139

操作

收起

2 回答

慕函数6472736
2016-01-21

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"/></script>
<title>带有分散效果的瀑布流</title>
<style type="text/css">
    *{padding: 0;margin:0;}
    #main{
        position: relative;
    }
    .pin{
        padding: 15px 0 0 15px;
        float:left;
    }
    .box{
        padding: 10px;
        border:1px solid #ccc;
        box-shadow: 0 0 6px #ccc;
        border-radius: 5px;
    }
    .box img{
        width:162px;
        height:auto;
    }
</style>
<script>

var dataInt={
     	'data':[
        		{'src':'http://img.boqiicdn.com/Data/Bbs/Users/128/12865/1286501/imgFile43321367733346.jpg'},
        		{'src':'http://news.k618.cn/pic/top/201510/W020151031321958043503.jpg'},
        		{'src':'http://ww1.sinaimg.cn/mw600/ae236388gw1e7cx5xiqufj2099099jsa.jpg'},
        		{'src':'http://imgsrc.baidu.com/forum/w%3D580/sign=f9922429ba12c8fcb4f3f6c5cc0392b4/2232b31bb051f8190d015543d9b44aed2e73e7b7.jpg'}
	]};

$( window ).on( "load", function(){
    
   // 调用waterfall函数
    waterfall();
});
window.onscroll=function(){
       // 拖动滚动条时
       var pins = $('#main > div'),
             main = $('#main'),
             pinW = pins.eq(0).outerWidth();   
       //在滚动发生时清除掉分散布局的样式，进入瀑布流布局
       clearCss( pins );//清除分散布局
       arrangement( pinW, pins );//瀑布流布局  
       upData( pinW, pins );//判定是否加载新数据
}


function waterfall(){
 // 计算及定位数据块显示分散效果
var pins = $('#main > div'),
     pinW = pins.eq(0).outerWidth();   
var winW = $(window).width,
      winH = $(window).height;
//父容器居中布局       
$('#main').css( { 'width' : pinW*6+'px', 'height' : pinW*4+'px', 'top':pinW+'px', 'margin' : '0 auto'} );
//如何实现分散
  for( var i in pins ){
         pins.eq(i).css({
           'position':'absolute',
           'top':Math.floor(Math.random()*10)*30-(pins.height()/2)+'px',
           'left':Math.floor( Math.random()*(pinW*5) )+'px'
        });
  }    
}

//清除分散布局的CSS
function clearCss( arr )
{
    $('#main').removeAttr('style');
    for( var i in arr )
   { 
       arr.eq(i).removeAttr('style');
   }
}

//瀑布流排列，与分散布局分开写是为了使逻辑清晰
function arrangement( w, arr ){
    var cols = Math.floor( $(window).width() / w );
    $('#main').css( { 'width':cols*w, 'margin':'0 auto'} );
    var hArr = [];
    arr.each( function( index, value ){
        if( index < cols )
        {
            hArr[index] = $(value).outerHeight();
        }else{
            var minH = Math.min.apply( null, hArr ),
                 minIndex = $.inArray( minH, hArr );
            $( value ).css({
                 'position':'absolute',
                 'top':minH+'px',
                 'left':minIndex*w+'px'
             });	
            hArr[minIndex] += arr.eq(index).outerHeight();
        }
      
    } );
}

function checkscrollside(){
  // 检测是否具备了加载数据块的条件
  var winH = $(window).height(),
       scroH = $(window).scrollTop(),
       lastBoxTop = Math.floor( $('#main > div').last().offset().top + $('#main > div').last().height() / 2 );
  return ( winH + scroH > lastBoxTop ? true : false );
}

//这里是数据加载
function upData( w, arr ){
    if( checkscrollside )
   {
          $.each( dataInt.data, function( key, value ){
                 var creatPin = $('<div>').addClass('pin').appendTo($('#main')),
                      creatBox = $('<div>').addClass('box').appendTo( $(creatPin) );
                 $('<img>').attr( 'src', value.src ).appendTo( $(creatBox) );
           });
          arrangement( w, arr );
    }
}

</script>
</head>
<body>
<div id="main">
    <div class="pin">
        <div class="box">
            <img src="http://news.k618.cn/pic/top/201510/W020151031321958043503.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://pic47.nipic.com/20140901/12398452_214208031000_2.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://news.k618.cn/pic/top/201510/W020151031321958043503.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://ww2.sinaimg.cn/large/8989048bjw1dutawvaz66j.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://img.boqiicdn.com/Data/Bbs/Users/128/12865/1286501/imgFile43321367733346.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://ww1.sinaimg.cn/mw600/ae236388gw1e7cx5xiqufj2099099jsa.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://news.k618.cn/pic/top/201510/W020151031321958043503.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=f9922429ba12c8fcb4f3f6c5cc0392b4/2232b31bb051f8190d015543d9b44aed2e73e7b7.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://img.boqiicdn.com/Data/Bbs/Users/128/12865/1286501/imgFile43321367733346.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://img.boqiicdn.com/Data/Bbs/Users/128/12865/1286501/imgFile43321367733346.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://www.mengtu.cc/uploads/allimg/140802/1-140P2235644-50.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://news.k618.cn/pic/top/201510/W020151031321958043503.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://img.boqiicdn.com/Data/Bbs/Users/128/12865/1286501/imgFile43321367733346.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://imgsrc.baidu.com/forum/w%3D580/sign=f9922429ba12c8fcb4f3f6c5cc0392b4/2232b31bb051f8190d015543d9b44aed2e73e7b7.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://www.mengtu.cc/uploads/allimg/140802/1-140P2235644-50.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://img.boqiicdn.com/Data/Bbs/Users/128/12865/1286501/imgFile43321367733346.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://ww2.sinaimg.cn/large/8989048bjw1dutawvaz66j.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://img.boqiicdn.com/Data/Bbs/Users/128/12865/1286501/imgFile43321367733346.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://www.mengtu.cc/uploads/allimg/140802/1-140P2235644-50.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://img.boqiicdn.com/Data/Bbs/Users/128/12865/1286501/imgFile43321367733346.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="http://ww2.sinaimg.cn/large/8989048bjw1dutawvaz66j.jpg"/>
        </div>
    </div>
</div>
</body>
</html>

有个漏洞，就是如果你打开网页，图片能够全部显示、那么滚动加载就会失效！

0 回复有任何疑惑可以回复我~

收起回答

慕函数6472736

我这个没有动画效果，不酷

2016-01-21 回复有任何疑惑可以回复我~

野猫1
2016-01-19

$(window).on('load',function(){
    waterfall();
    //后台给了我们json数据
    var dataInt ={"data":[{"src":'0.jpg'},{"src":'13.jpg'},{"src":'24.jpg'},{"src":'25.jpg'},{"src":'36.jpg'}]};
    window.onscroll = function(){
    $(window).on('scroll',function(){
        if (checkScrollSlide) {
            $.each(dataInt.data,function(index,value){
                var oBox = $('<div>').addClass('box').appendTo($("#main"));
                var oPic = $('<div>').addClass('pic').appendTo(oBox);
                $('<img>').attr('src','images/'+ $(value).attr('src')).appendTo(oPic);
                })
            waterfall();
            }
        })
    }
})

function waterfall(){
     var $boxs = $('#main>div');//大于号，之匹配一级div子元素；
     var w = $boxs.eq(0).outerWidth();//获取每列的宽度
     var cols = Math.floor($(window).width()/w);
     $('#main').width(w*cols).css('margin','0 auto');//设置main的宽度，并居中显示
     var hArr = [];
     $boxs.each(function(index,value){
         var h = $boxs.eq(index).outerHeight();
         if(index<cols){
             hArr[index] = h;
         }else{
             var minH = Math.min.apply(null,hArr);
             var minHIndex = $.inArray(minH,hArr);//求出minH在HArry中的索引
             $(value).css({//将value转换成jQuery对象才可以使用jQuery方法；
                 'position':'absolute',
                 'top':minH + 15,
                 'left':minHIndex*w ,
             })
             hArr[minHIndex]+=$boxs.eq(index).outerHeight()+15;
         }
     })
}

function checkScrollSlide(){
    var $lastBox = $('#main>div').last();
    var lastBoxDis = $lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);
    var scrollTop = $(window).scrollTop();
    var documentH = $(window).height();//浏览器可是窗口的高度
    return(lastBoxDis<scrollTop+documentH)?true:false;
}

这是jQuery实现方法视频里面老师教着写的，跟老师给的源代码不一样，但是在浏览器上效果很卡，希望对你有帮助

0 回复有任何疑惑可以回复我~

收起回答