グリッドに列を作成するために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);