wookmark插件包括网格作为javascript

时间:2017-01-14 07:59:52

标签: javascript

我对这个话题有疑问。 我第一次使用stackover。

我使用JS wookmark插件。顺便说一下我制作网页的方式。 带侧边栏的页面之一,打开和关闭。 当我关闭左侧边栏时,它会留下文章留下的空间。 通常它在没有空间的情况下调整宽度。侧边开放尺寸为260px。收盘价为70。

我使用这些但没有动作。

$(document).ready(function() {

           var article_list = $("#grid-container article").get();
            var outer = $('<div class="grid-outer"></div>').get(0);
            var nowbox = false;

            for ( var i = 0; i < article_list.length; i++ ) {
                if($(article_list[i]).hasClass('area')){
                    nowbox = false;
                    $(outer).append(article_list[i]);
                }
                if($(article_list[i]).hasClass('area-box')) {
                    if(!nowbox) {
                        nowbox = $('<div class="gridbox"></div>').get(0);
                        $(outer).append(nowbox);
                    }
                    $(nowbox).append(article_list[i]);
                }
            }
            $("#grid-container").empty();
            $("#grid-container").append(outer);
            var options = {
              offset: 20, // Optional, the distance between grid items
              autoResize: true,
              fillEmptySpace: true,
            };

            var resizeTimer = null;
            var gridarr = [];
            var gridboxlist = $('.gridbox').get();
            for ( var i = 0; i < gridboxlist.length; i++ ) {
                gridarr[i] = new Wookmark( gridboxlist[i], options);
            }

            resize();
            resizeTimer = setTimeout(function() {
                resize();
            }, 0);

            $(window).resize(function(){
                clearTimeout(resizeTimer);
                resize();
                resizeTimer = setTimeout(function() {
                    resize();
                }, 0);
            })

            function resize(){
                var gridboxlist = $('.gridbox').get();

                $(gridboxlist).each(function(){
                    var window_w = window.outerWidth;
                    var outer_w = $(this).width();
                    if( window_w < 1400) {
                        var w = Math.floor((( outer_w - ( 20 * 1 )) / 2));
                        $(this).find('.area-box').css({
                            'width': w+'px'
                        });
                    } else {
                        var w = Math.floor((( outer_w - ( 20 * 2 )) / 3));
                        $(this).find('.area-box').css({
                            'width': w+'px'
                        });
                    }

                });
                if( 0 < gridarr.length ){
                    refresh();
                }
            }

            function refresh(){
                for ( var i = 0; i < gridarr.length; i++ ) {
                    gridarr[i].layout(true);
                }
            }
});

0 个答案:

没有答案