瀑布流Masonry学习

这几天参考了http://www.cnblogs.com/sanshi/p/3237429.html博文

用Bootstrap+jQuery+Masonry+imagesLoaded做了下图片瀑布流形式的审核功能。

选中图片，可以批量审核，通过或者不通过。

1.首先引入js

<script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/js/masonry.pkgd.min"></script>
<script type="text/javascript" src="/js/imagesloaded.pkgd.min.js"></script>

2.html布局

<div class="panel panel-default">
    <div class="panel-body">
        <div id="masonry">
            <div class="post">
                <div class="item-img">
                    <a href="javascript:void(0)"><img src="/images/1.jpg" /></a>
                    <div class="city"><a><strong>福州</strong></a></div>
                    <div class="desc">
                        <a><span>描述：</span>描述，字符串</a>
                        <a><span>昵称：</span>游客</a>
                    </div>
                    <div class="createTime">2014-08-07</div>
                    <div class="item-select">
                        <div class="bor"><span></span></div>
                        <label class="item-check"><i class="icon-check"></i></label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="go-top-wrap">
        <a href="javascript:void(0);" id="go-top" class="scroll-to-top goto-bg-com">返回顶部</a>
    </div>
</div>
<!--加载中-->
<div id="loading" class="loading-wrap">
    <span class="loading">加载中，请稍后...</span>
</div>

3.css样式

#masonry .post {
  text-align: justify;;
  margin: 5px 5px 5px 5px;
  float: left;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  border-radius: 5px;
  width: 266px;
}
.post a {
  text-align: center;
  display: block;
  text-decoration: none;
}
.post img {
  max-width: 260px;
}

.item-checked .item-select .bor {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 2px solid #2375C8;
  _width: 98%;
  _height: 98%;
}
.item-select .item-check {
  position: absolute;
  top: 0;
  left: 0;
}
.item-checked .icon-check {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin: 0;
  background-image: url(../images/selected.jpg);
  background-color: #67B1EA;
  border: 2px solid #2375C8;
}
.city {
  text-align: center;
  margin: 10px 0 0 0;
}
.desc {
  padding: 5px 15px 5px 15px;
  color: #888;
}
.createTime {
  border-top: 1px solid #EBEBEB;
  color: #AAA;
  text-align: center;
  padding: 5px 0 5px 0;
  background: #FAFAFA;
}

4.js调用

var $container = $('#masonry');
    $container.imagesLoaded(function () {
    $container.masonry({
        singleMode: true,
        animate: true,
        itemSelector: '.post'
        });
    });

//用户拖动滚动条，达到底部时ajax加载一次数据
            loading = $("#loading").data("on", false);//通过给loading这个div增加属性on，来判断执行一次ajax请求
            //滚动条滚动到离底部距离50的时候触发
            $(window).scroll(function () {
                if (loading.data("on")) return;
　　　　　　　　　 if ($(document).height() - $(this).scrollTop() - $(this).height() < 50) {
　　　　　　　　　　　　　　//加载更多数据
                        ... //调用ajax方法请求图片
　　　　　　　　　　　　　　//(a)当图片加载完成后，才重新定位
　　　　　　　　　　　　　　$container.imagesLoaded(function () {
　　　　　　　　　　　　　　$container.masonry();
　　　　　　　　　　　　　　});
                }
if ($(document).height() > document.documentElement.clientHeight) {

                    $('#go-top').css("visibility", "visible");
                }
            });

大概流程就是这样，用起来效果蛮不错的，继续学习。。。。

注意：静态加载图片时，没有（a）瀑布流会正常显示。如果是动态请求服务器的资源，没有完全加载完图片时，就会去排列图片，因为不知道图片高度，会造成排列混乱。加了（a）后，会调整布局。就ＯＫ了。