jquery 实现瀑布流效果

最新推荐文章于 2020-08-01 12:31:04 发布

weixin_30739595

最新推荐文章于 2020-08-01 12:31:04 发布

阅读量78

点赞数

原文链接：http://www.cnblogs.com/chenlongming/p/5604011.html

版权

布局的原理：用一个类名为item的div作为图片的容器，每个item的宽都相等，高度自适应，使用绝对定位。第一行的item只需要处理left就不详细说了。第二行以后：获取到第一行的item的高度作为这一列的高度，找到其中最小的值，那么从第二行开始的item的top值就等于这个值，而left就等于这一列的left，这个时候这一列的高度+=当前处理的item的高度。

附上详细代码

HTML部分：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="picturewall"></div>
</body>
</html>

CSS:

        *{
            font-family: "microsoft yahei",sans-serif;
            padding: 0;
            margin: 0;
        }
        #picturewall{
            width: 940px;
            height: auto;
            margin: 0 auto;
            position: relative;
        }
        .item{
            width: 300px;
            height: auto;
            box-sizing: border-box;
            border: 1px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-shadow: 0 0 15px #666;
            -moz-box-shadow: 0 0 15px #666;
            box-shadow: 0 0 15px #666;
            position: absolute;
            text-align: center;
        }
        .item>img{
            height: auto;
            width: 280px;
            display: block;
            margin: 10px;
        }

jquery :

$(function(){
            //用数组存放图片的文件名
            var pictureSources = [
                "31bbb105bf1ce318ffd72de5fd601614edda4cd61d278-IjoIRf_fw658.jpg",
                "57a70575f8a78ffe9d65297e0f75be89a61f14fa3988b2-LgCVaH_fw658.jpg",
                "6182b15541cb11f6de40ccd9be7239861ba946de26304a-p6giW6_fw658.jpg",
                "6c0898eb4b898db935c27f8c3319d54b34104e8b22fd8-oKLgCV_fw658.jpg",
                "9d5992e5231864f09748b6d5f7b03165821bdb4bffc3e-0n27FJ_fw658.jpg",
                "a1c7f703728f99e7e59fd8c9c250ef8536fa8ae0327fd7-Uh635n_fw658.jpg",
                "c627789a24da25b438a3d86310e97612f697316bd970-YXUyG9_fw658.jpg",
                "d7e78fc59a0c102c282a154177ed730295634a241d907-ELAB1U_fw658.jpg",
                "dcc0754632a597e2ab91ce85eabca8fa71842ac71647e-2pRt4q_fw658.jpg"
            ];
            var base = "picture\/";


            //item 元素的基本结构
            var baseElem = $("<div class='item'></div>").append("<img/>").append("<hr/>").append("<h4>description</h4>");


            //实现瀑布流布局的函数
            function waterfall(){
                var items = $("div.item");//获取到所有的类名为item的元素
                var postop = [];//这个数组用来存放item定位的高度
                var itemWidth = items.eq(0).width()+10;//宽度都是一样的所有随便获取一个就行
                items.each(function(index,elem){
                    var targetItemTop = items.eq(index).height()+10;//遍历所有item并获取高度
                    if(index < 3){//如果是在第一行
                        postop[index] = targetItemTop;//把高度直接加入数组中
                        $(elem).css({
                            "left":310*index,//设置left
                            "top": 10//和top
                        });
                    }else{
                        //其他行
                        var mintop = Math.min.apply(null,postop);//获取数组中最小的一个
                        var minindex = $.inArray(mintop,postop);//获取到数组最小值对应的排序
                        $(elem).css({
                            "top":mintop+10,//设置top为数组中最小值
                            "left":parseInt(items.eq(minindex).css("left"))//设置left
                        });
                    }
                    postop[minindex] += $(elem).height()+10;//更新数组
                });
            }


            //添加item的函数
            function getItems(){
                for(var i = 0; i < pictureSources.length; i++){
                    baseElem.clone().hide().children("img").attr("src",base+pictureSources[i]).bind("load",function(){
                        waterfall();
                        $(this).parent().fadeIn(500);

                    }).end().appendTo("#picturewall");
                }
            }


            //判断文档滚动的位置
            function wheelListen(){
                var srollHeight = $(document).scrollTop();
                if(srollHeight+$(window).height() >= $(document).height()-100){
                    getItems();
                }
            }


            //绑定事件
            $(window).on("load",function(){
                getItems();
                $(document).bind("mousewheel DOMMouseScroll",function(){
                    wheelListen();
                });
            })
        });

效果图：

通过滚动鼠标滚轮可以实现图片无限加载，配合上ajax基本上就完成了。

转载于:https://www.cnblogs.com/chenlongming/p/5604011.html

weixin_30739595

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 实现瀑布流效果

布局的原理：用一个类名为item的div作为图片的容器，每个item的宽都相等，高度自适应，使用绝对定位。第一行的item只需要处理left就不详细说了。第二行以后：获取到第一行的item的高度作为这一列的高度，找到其中最小的值，那么从第二行开始的item的top值就等于这个值，而left就等于这一列的left，这个时候这一列的高度+=当前处理的item的高度。附上详细代码HTML部分：...
复制链接

扫一扫