进阶18 瀑布流

题目1： 实现一个瀑布流布局效果

• html部分

<div class="wrap">
    <div class="item h1">1</div>
    <div class="item h3">2</div>
    <div class="item h2">3</div>
    <div class="item h1">4</div>
    <div class="item h3">5</div>
    <div class="item h2">6</div>
    <div class="item h3">7</div>
    <div class="item h1">8</div>
    <div class="item h3">9</div>
    <div class="item h2">10</div>
    <div class="item h1">11</div>
    <div class="item h1">12</div>
    <div class="item h1">13</div>
    <div class="item h2">14</div>
    <div class="item h3">15</div>
     ……
</div>

• css部分

.wrap{
  position: relative;
}
.item{
  position: absolute;
  width: 200px;
  margin: 10px 10px 0 0;
  transition: all .8s;
}
.h1{
  height: 180px;
  background: #ff44bb;
}
.h2{
  height: 80px;
  background: #f4b300;
}
.h3{
  height: 320px;
  background: #006ac1;
}

• js部分

waterFall();
$(window).resize(function(){
  waterFall();
});

function waterFall(){
  var ctWidth=$('.wrap').width()
  var divWidth=$('.item').width()
  var colCount=parseInt(ctWidth/divWidth);
  var itemArr=[];
  for(var i=0;i<colCount;i++){
    itemArr[i]=0;
  }
  $('.item').each(function(){
    //var minValue = Math.min.apply(null,itemArr);
    //var minIndex = itemArr.indexOf(minValue);
    var idx=0;
    var minColHeight=itemArr[0];
    for(var i=0;i<itemArr.length;i++){
      if(itemArr[i]<minColHeight){
        idx=i;
        minColHeight=itemArr[i]
      }
    }
    $(this).css({
      top: itemArr[idx],
      left: $(this).outerWidth(true)*idx
    })
    itemArr[idx]+=$(this).outerHeight(true)
  })
}

瀑布流-demo

题目2 (选做)： 根据课程视频实现一个新闻瀑布流新闻网站，查看效果

jsonp 接口参数： http://platform.sina.com.cn/slide/album_tech?jsoncallback=func&app_key=1271687855&num=3&page=4

• html

<div id="wrap">
    <div id="ct-waterFall">
      <ul id="ct-news">
      <!--
        <li class="item">
          <a href="#"><img src="http://s.img.mix.sina.com.cn/auto/resize?img=http%3A%2F%2Fwww.sinaimg.cn%2Fdy%2Fslidenews%2F5_img%2F2016_09%2F453_75615_657883.jpg&size=250_0" alt=""></a>
          <h4 class="header">我是新闻的标题</h4>
          <p class="summery">我是新闻的摘要，我是新闻的摘要，我是新闻的摘要，我是新闻的摘要，我是新闻的摘要，我是新闻的摘要，我是新闻的摘要，我是新闻的摘要，我是新闻的摘要，我是新闻的摘要...</p>
        </li>
      -->
        <li class="item hide"></li>
      </ul>
      <div id="load"></div>
    </div>
  </div>

• css部分

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul,li{
  list-style: none;
}
a{ 
  text-decoration: none;
  cursor: pointer;
}
#wrap{
  min-width: 700px;
  margin: 0 auto;
}
#ct-news{
  position: relative;
}
.item{
  position: absolute;
  width: 280px;
  border: 1px solid #dfdfdf;
  margin-top: 10px;
  padding: 5px;
  transition: all .8s;
}

.item img{
  width: 100%;
}
.item .header{
  border-bottom: 1px solid #dfdfdf;
  margin: 4px 2px;
  padding: 4px
}
.item .summery{
  font-size: 12px;
  line-height: 1.8;
  color: #777371;
}
.hide{
  display: none;
}
#load{
  //opacity: 0;
  //border: 1px solid red;
  height: 20px;
}

• js部分

var perPageCount=10;
var curPage=0;
var newsWidth=$('.item').outerWidth(true);
var colCount=parseInt($('#wrap').width()/newsWidth);
var colHeight=[];
for(var i=0;i<colCount;i++){
  colHeight[i]=0;
}
var isNewsArrive=true;

showNews()
$(window).scroll(function(){
  if(!isNewsArrive) return
  if(isVisible($('#load'))){
    showNews()
  }
})

function showNews(){
  getData(function(newList){
    isNewsArrive=true;
    $.each(newList, function(idx,news){
      console.log('加载')
      var $node = getNode(news)
      $node.find('img').load(function(){
        $('#ct-news').append($node)
        //console.log($node, 'loaded...')
        waterFall($node)
      })
    })
  })
  isNewsArrive=false;
} 

//懒加载
function isVisible($div){
  var windowHeight=$(window).height();
  var scrollTop=$(window).scrollTop();
  var offsetTop=$div.offset().top;
  if(offsetTop<windowHeight+scrollTop&&offsetTop > scrollTop){
    return true;
  }else{
    return false;
  }
}

//瀑布流布局
function waterFall($node){
  var minValue=Math.min.apply(null,colHeight);
  var minIndex=colHeight.indexOf(minValue)
  //console.log(minValue);
  //console.log(minIndex);
  $node.css({
    top: minValue,
    left: newsWidth*minIndex,
    opacity: 1
  })
  colHeight[minIndex]+=$node.outerHeight(true);
  $('#ct-news').height(Math.max.apply(null,colHeight))
}

//拼装成DOM节点
function getNode(item){
  var html='';
  html+='<li class="item">';
  html+='<a href="#"><img src="'+item.img_url+'" alt=""></a>';
  html+='<h4 class="header">'+item.short_name+'</h4>';
  html+='<p class="summery">'+item.short_intro+'</p>';
  html+='</li>';
  return $(html);
}

//向后台获取数据
function getData(callback){
  $.ajax({
    url: 'http://platform.sina.com.cn/slide/album_tech',
    dataType: 'jsonp',
    jsonp: 'jsoncallback',
    data: {
      app_key: '1271687855',
      num: perPageCount,
      page: curPage
    }
  }).done(function(ret){
    if(ret&&ret.status&&ret.status.code==='0'){
      callback(ret.data);
      curPage++
      //console.log(curpage)
    }else{
      console.log('get error data!')
    }
  })
}

瀑布流新闻网站