Question

我正在开发一个jquery插件，在网格中创建列，我对图像有困难。我不确定是否需要更改某种css或者javascript是否运行得太快。这是html：

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">        </script>
    <script src="gridilizer.js"></script>
    <script>
            $(document).ready(function() {
                    $(this).gridilizer();
            });
    </script>
    <style>
    body, html {
        padding:0;
        margin:0;
    }
    header {
        background:#dcd;
        height:200px;
        font-size:100px;
        text-align:center;
        line-height:200px;
    }
    [data-rows] {
        background:#dcdcdc;
    }
    </style>
    </head>
    <body>
    <header>
            GRIDILIZER.JS
    </header>

    <div class="row">
        <div data-rows="7">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue aliquam lorem quis varius. Ut ac libero vel purus ultricies ultricies. Curabitur diam leo, consequat vel volutpat ut, auctor vehicula est. Sed lorem arcu, fermentum sed aliquam et, sollicitudin vitae tellus. Vivamus purus urna, vehicula ut euismod nec, dapibus ut lorem. Ut magna lorem, volutpat ut hendrerit ac, fringilla vitae nibh. Ut tempor elit non libero pellentesque dignissim. Nunc tincidunt ornare lorem, id porttitor leo varius ut.
        </div>
        <div data-rows="5">
            test8
        </div>
    </div>

    <div class="row">
        <div data-rows="12">
            <img width="50%" src="http://images.wikia.com/powerlisting/images/b/b9/Mountain_wallpaper_005_1024.jpg" />
            <p>Image</p>
        </div>
    </div>

    <div class="row">
        <div data-rows="3">
            <h1>Headline</h1>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue aliquam lorem quis varius. Ut ac libero vel purus ultricies ultricies. Curabitur diam leo, consequat vel volutpat ut, auctor vehicula est. Sed lorem arcu, fermentum sed aliquam et, sollicitudin vitae tellus. Vivamus purus urna, vehicula ut euismod nec, dapibus ut lorem. Ut magna lorem, volutpat ut hendrerit ac, fringilla vitae nibh. Ut tempor elit non libero pellentesque dignissim. Nunc tincidunt ornare lorem, id porttitor leo varius ut.
        </div>
        <div data-rows="3">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue aliquam lorem quis varius. Ut ac libero vel purus ultricies ultricies. Curabitur diam leo, consequat vel volutpat ut, auctor vehicula est. Sed lorem arcu, fermentum sed aliquam et, sollicitudin vitae tellus. Vivamus purus urna, vehicula ut euismod nec, dapibus ut lorem. Ut magna lorem, volutpat ut hendrerit ac, fringilla vitae nibh. Ut tempor elit non libero pellentesque dignissim. Nunc tincidunt ornare lorem, id porttitor leo varius ut.
        </div>
        <div data-rows="3">
            test4
        </div>
        <div data-rows="3">
            test4
        </div>
    </div>
    </body>
    </html>

我的javascript：

(function($){
$.fn.extend({
    gridilizer:function(){
        // Style Row Here
        $(".row").css({
            'width':'95%',
            'margin':'2% 2.5%',
            'display':'block',
            'float':'left'
            //'min-height':'200px'
            //'height':'auto',
            //'overflow':'hidden'
        });
        //Get Elements with data-rows property
        elem=$("[data-rows]");
        // Set background color for border hack
        color=$('body').css("background-color");
        if(color='rgba(0,0,0,0)'){
            $('body').css('background-color','#fff')
        }
        // Style each grid element
        return elem.each(function(){
        $this=$(this);
        //Get number of rows
        rows=$this.attr('data-rows');
        //Math to find number of rows in a 12-grid area
        width=(rows/12*100);
        //Set border to background color
        background=$this.parents(":not(.row)").css("background-color");
        $this.css({
            'width':width+'%',
            'display':'block',
            'float':'left',
            'padding':'2% 5%',
            'border':'10px solid '+background,
            '-webkit-box-sizing':'border-box',
            '-moz-box-sizing':'border-box',
            'box-sizing':'border-box'
            });
        console.log($this.parent('.row').height());
        height = $this.parent().height();
        $this.height(height);
            });
        }
    });
})(jQuery);

Answer 1

可能是因为您在DOM完全加载之前调用了您的插件。浏览器解析HTML代码的方式是从上到下。所以它首先命中你的函数调用然后呈现DOM。根据执行插件功能所需的时间，在整个页面加载时，DOM可能无法完全加载。尝试将呼叫移到底部，就在结束体标记（）之前。你仍然可以在声明中留下声明。让我知道事情的后续。

Answer 2

在

中

this.css({
        'width':width+'%',
        'height':100%
        'display':'block',
        'float':'left',
        'padding':'2% 5%',
        'border':'10px solid '+background,
        '-webkit-box-sizing':'border-box',
        '-moz-box-sizing':'border-box',
        'box-sizing':'border-box'
        });**

尝试添加'height'：100％以使其适合父div的范围。

有jQuery插件和图像的问题

2 个答案: