我正在开发一个 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);