ajax综合案例之瀑布流

最新推荐文章于 2021-08-05 14:19:35 发布

carriehaohao

最新推荐文章于 2021-08-05 14:19:35 发布

阅读量606

点赞数

CC 4.0 BY-SA版权

分类专栏： ajax 文章标签： ajax 瀑布流

本文链接：https://blog.csdn.net/carriehaohao/article/details/54174685

ajax 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种动态瀑布流布局的实现方法，通过使用jQuery插件动态调整图片位置，确保美观的同时提高页面加载效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

瀑布流

静态的瀑布流做法是，

先固定了第一排，才能确定后面的图的放置位置。

但如果将承载着每张图的json数据动态渲染到页面中时，这种方法就不适用了，因为无法确定每个图所在的位置，无法计算哪列最矮。

动态的瀑布流做法是，

第1行：top=0，left=index*(盒子宽度+间距)，渲染的同时记录下每列的高度

后n行：找到最矮列，top=该列的高度+间距，left=该列index*(盒子宽度+间距)，并更新记录该列的高度

本方法直接给 jQuery 定义了扩展方法，命名为 WaterFall，需要提前引入 jQuery 包。

/*闭包，函数自调用，这里定义的变量不会受全局变量的影响*/
(function($){
    /*相当于给JQuery定义了一个新的插件*/
    $.fn.WaterFall = function () {
       
        /*初始化的元素，设定的是大容器*/
        var $parentBox = $(this);
        var parentWidth = $parentBox.width();//容器的宽度固定
        var $itemsBox = $parentBox.children();//所有子容器
        var itemWidth = $itemsBox.width();//子容器的宽度固定
        var col = 5;//显示多少列固定
        var space = (parentWidth - col*itemWidth)/(col-1);//间距
        /*记录每一列的高度*/
        var arrHeight = [];
        /*布局 定位*/
        $itemsBox.each(function (index,item) {
            /*每一个子容器*/
            var $item = $(item);
            /*前五个，比较特殊*/
            if(index < col){
                /*记录到arrHeight*/
                arrHeight[index] = $item.height();
                $item.css({
                    top:'0',
                    left:index*(itemWidth+space)
                });
            }
            /*其他的*/
            else {
                /*找到最矮的一列*/
                /*当前这列的高度和索引*/
                var minHeight = arrHeight[0];
                var minIndex = 0;
                for(var i=0; i arrHeight[i]){
                        minHeight = arrHeight[i];
                        minIndex = i;
                    }
                }
                /*定位*/
                $item.css({
                    top:minHeight+space,
                    left:minIndex*(itemWidth+space)
                });
                /*重新记录当前列的高度*/
                arrHeight[minIndex] = minHeight + space + $item.height();
            }
        });
        var maxHeight = arrHeight[0];
        for(var i=0; i

jQuery Plugin


    
        
    
    正在加载中...