背景色が重なるもしくはつかない

質問

こんばんは、お世話になります。
背景色が重なる、もしくは色がつかないのですが
どのようにしたらよいでしょうか？
因みにヘッダーのメニューの後ろにも灰色を付けています。
ご教示お願いします。

@charset "utf-8";
body {
color: lightblue;
}
.wrapper {
width: 960px;
margin: 0 auto;
overflow: hidden;
padding: 0px 0px 10px 10px;

}

.wrapper .col {
float: left;
width: 25%;
}

.wrapper .col .item {
display: block;
margin: 5px 5px 5px 5px;
padding: 10px;

}

.imgbox img {
width: 100%;
height: 100%;
object-fit: cover;
vertical-align: bottom;
border-radius:15%;
}

.fadein {
opacity : 0;
transform : translate(0, 100px);
transition : all 1s;
}

.fadein.active{
opacity : 1;
transform : translate(0, 0);
}

a.header {
display: block;
text-decoration: none;
}

.header {
background-color: rgba(0,0,0,.1);
margin: 0;
}

ul{
display: flex;
flex-wrap: wrap;
}

.header ul {
display: flex;
justify-content: center;
}
.header li {
font-size: 15px;
list-style-type: none;
}
.header li:not(:first-of-type) {
margin-left: 1rem;
}
.header a {
color: #000;
padding: 20px;
}

.text li{
width: 50%;
padding: 20px;
box-sizing: border-box;

/* 透過・非表示 */
opacity: 0;
visibility: hidden;

/* 要素の位置指定・アニメーション */
translate: 0 20px;
transition: 1s;
}
img{
width: 100%;
height: auto;
}
/* クラス付与で表示する */
.is-active{
opacity: 1;
visibility: visible;
translate: 0 0;
}

header li{
opacity: 1;
visibility: visible;
display: block; /* 縦に並べる*/
list-style-type: none;
padding: 0.5em;
background: #ccc;
}

回答No.7

AsarKingChang · ベストアンサー

>試して見た所、ズームアップするかのようにどんどんデカくなってきて
>画像が表示されました。
はい！真ん中から、各itemが正しい位置に移動するようにアニメさせてます。
画面の「リサイズ」にも反応してます。
this.offset[i]={
xOff: (document.documentElement.clientWidth-item[i].clientWidth)/2,
yOff: (document.documentElement.clientHeight-item[i].clientHeight)/2,
xTo: 0,
yTo: 0
初期位置はここで設定してます。
document.documentElement.clientWidth,document.documentElement.clientHeight
はブラウザのInner側のサイズ。
そこから、itemのサイズを引いたものを2で割る＝つまり、センターを指してます。
masonry??のような、外部プラグインなし、Jqueryもなしなので、
これが、嫌いじゃない??なら、ポータビリティーは結構高いんじゃないかな～って
感じてます。
邪魔なら、別ファイルで、なんとか.jsでインポートしちゃえば
<script>
/* これが本体 */
let j=new JackTheRipper99();
</script>
だけになるので、シンプル??かなと。
後は、このサンプルに、フェード処理でも、いろんなエフェクトを
加えてもいいでしょうね。
いわゆる一つのDIVをスプライト（移動可能な箱のようなパーツ）として
扱ってるので、どんな風にも、対応できますからね～

例えば、これを「2個」用意して。
1個目メニューを押すと、1個目のitemたちが出現？
そのまま2個目メニューを押すと、
「1個目のitemたちをどこかにしまうような動き+2個目のitemたちを出現させるなど」
にも、対応できるでしょうから＾＾
好きに改造しちゃってください～。

（でいいのかな？）

お礼

回答ありがとうございます。
ちょっと難しくて理解はあんまりできなかったのですが
改造させて頂きます(弄れる範囲で)

回答No.6

AsarKingChang

<script>
/* itemのwidthは自動になりましたので、CSSで指定した値でOKです */
function JackTheRipper99(){
this.offset=[];
this.timer=false;
this.timer_count=0;
window.onload = this.load.bind(this);
window.onresize = this.resize.bind(this);
};
JackTheRipper99.prototype.setTimer=function(){
clearTimeout(this.timer);
this.timer_count=5; /* ターン数 */
this.setTimerNext();
};
JackTheRipper99.prototype.setTimerNext=function(){
this.timer = setTimeout(this.animTo.bind(this),100); /* アニメ速度 */
};
JackTheRipper99.prototype.getItem=function(){
// let item=$('.wrapper .item');
let wrapper = document.getElementsByClassName('wrapper');
let item = wrapper[0].getElementsByClassName('item');
return item;
};
JackTheRipper99.prototype.getXMax=function(){
let item=this.getItem();
let xMax=item[0].clientWidth;
for (let i=0;i<item.length;i++) {
if (xMax<item[i].clientWidth) {
xMax=item[i].clientWidth;
}
}
return xMax;
};
// JackTheRipper99.prototype.getYMax=function(){
// let item=this.getItem();
// let yMax=item[0].clientHeight;
// for (let i=0;i<item.length;i++) {
// if (yMax<item[i].clientHeight) {
// yMax=item[i].clientHeight;
// }
// }
// return yMax;
// };
JackTheRipper99.prototype.setOffset=function(item,x,y){
item.style.left = x;
item.style.top = y;
};
/* 現在のYラインの最小のインデックスを返す */
JackTheRipper99.prototype.getMinT=function(y_table){
let x_index=0;
let y_min=y_table[0];
for (let i=0;i<y_table.length;i++) {
if (y_min>y_table[i]) {
x_index=i;
y_min=y_table[i];
}
}
return x_index;
};
JackTheRipper99.prototype.setTo=function(){
let item=this.getItem();
// let screen_width = $(window).width();
let screen_width = document.documentElement.clientWidth;
// ワーク変数
let x_index,y_table=[],i;
let x_index_max=(screen_width / this.xMax)|0;
for (x_index=0;x_index<x_index_max;x_index++) {
y_table[x_index]=0;
}
for (i=0;i<item.length;i++) {
x_index=this.getMinT(y_table);
this.offset[i]['xTo']=this.xMax*x_index;
this.offset[i]['yTo']=y_table[x_index];
y_table[x_index]+=item[i].clientHeight;
}
this.setTimer();
};
JackTheRipper99.prototype.animTo=function(){
let item=this.getItem();
for (let i=0;i<item.length;i++) {
this.offset[i]['xOff']+=(this.offset[i]['xTo']-this.offset[i]['xOff'])/this.timer_count;
this.offset[i]['yOff']+=(this.offset[i]['yTo']-this.offset[i]['yOff'])/this.timer_count;
this.setOffset(item[i],this.offset[i]['xOff'],this.offset[i]['yOff']);
}
this.timer_count--;
if (this.timer_count>0) this.setTimerNext();
};
JackTheRipper99.prototype.load=function(){
let item=this.getItem();
this.xMax=this.getXMax();
// this.yMax=this.getYMax();
for (let i=0;i<item.length;i++) {
this.offset[i]={
xOff: (document.documentElement.clientWidth-item[i].clientWidth)/2,
yOff: (document.documentElement.clientHeight-item[i].clientHeight)/2,
xTo: 0,
yTo: 0
};
this.setOffset(item[i],this.offset[i]['xOff'],this.offset[i]['yOff']);
}
this.setTo();
};
JackTheRipper99.prototype.resize=function(){
this.setTo();
};

/* これが本体 */
let j=new JackTheRipper99();

</script>

HTML部分は、そのままでOKです。
特性上、下の方が隙間ができやすいので、背景になじみやすいゴミパーツを数個置いた方が綺麗に見えるので、そこだけ＾＾
ウネウネアニメを入れちゃってます（ｗ）
で、パラメーターが「なし」ですが、
<div class="wrapper">
これの"wrapper"などをパラメタに入れる事で、
同じような、敷き詰め＆スライダーを何個も配置できるので
必要なら改造を！
あと、アニメのターンを関数で制御してるので、
フェードなどをしたいなら、その辺でいじればOKですよ。
（意味もなく、開始時「画面中心」から飛ばしてるので、
　これを、上から？下から？左？右？とか、いじっても
　面白いかもね）
ってことで、なお、これ「ブラウザ画面のサイズ」を
基準にしてるので、DIVなどの中に出す時は、
基準サイズの取得部を変更してみてください～
ってことで！

お礼

ありがとうございます。
試して見た所、ズームアップするかのようにどんどんデカくなってきて
画像が表示されました。

回答No.5

AsarKingChang

この板ちょい、残しておいてくだされ～
別バージョン？作ってみますので～
あはは（でも遊びなんですけどね）

お礼

回答ありがとうございます。
了解しましたー。

回答No.4

AsarKingChang

差分にて失礼。
強制敷き詰めバージョン
<script>
/* 横幅を例えば200と決める */
var item_width=200;

/* 現在のYラインの最小のインデックスを返す */
function min_y(y_table) {
let x_index=0;
let y_min=y_table[0];
for (let i=0;i<y_table.length;i++) {
if (y_min>y_table[i]) {
x_index=i;
y_min=y_table[i];
}
}
return x_index;
}
function init() {
// let item=$('.wrapper .item');
let wrapper = document.getElementsByClassName('wrapper');
let item = wrapper[0].getElementsByClassName('item');
// let screen_width = $(window).width();
let screen_width = document.documentElement.clientWidth;
// ワーク変数
let x_index,y_table=[],i;

let x_index_max=(screen_width / item_width)|0;
for (x_index=0;x_index<x_index_max;x_index++) {
y_table[x_index]=0;
}

for (i=0;i<item.length;i++) {
x_index=min_y(y_table);
item[i].style.left = item_width*x_index;
item[i].style.top = y_table[x_index];
y_table[x_index]+=item[i].clientHeight;
}
};
window.onload = init;
window.onresize = init;
</script>
Yの最小位置を次のパーツの配置位置として
それに、heightを加算（これで最小じゃなくなる）
の繰り返し。
特性上「順番バランバラン」
しかたないか～

ってな感じで？遊んでみました＾＾
（暇つぶしなので、遊べたらいいかな～程度で）
なお、itemは数が変わらないのだから、
それのオフセットを取っておくと、
「新しい位置にアニメ移動する？」なんて
演出もできますよ。

回答No.3

AsarKingChang

クソ投げやりバージョン＾＾のmasonry.jsも作ってみました。
（あそびですからね＾＾）
-------------------
<html>
<head>

<style>
.wrapper {
display: flex;
flex-wrap: wrap;
position: relative;
}
.imgbox {
background-color:pink;
position: absolute;
width:200; /* ここと、item_widthをあわせてね！ */
}
img { /* 画像が「ｘ」になるので、嘘サイズを入れてるだけ */
background-color:green;
width:120;
height:120;
}
</style>
<script>
/* 横幅を例えば200と決める */
var item_width=200;

function init() {
// let item=$('.wrapper .item');
let wrapper = document.getElementsByClassName('wrapper');
let item = wrapper[0].getElementsByClassName('item');
// let screen_width = $(window).width();
let screen_width = document.documentElement.clientWidth;
// ワーク変数
let x_index,y_table=[],i;

let x_index_max=(screen_width / item_width)|0;
for (x_index=0;x_index<x_index_max;x_index++) {
y_table[x_index]=0;
}

x_index=0;
for (i=0;i<item.length;i++) {
item[i].style.left = item_width*x_index;
item[i].style.top = y_table[x_index];
y_table[x_index]+=item[i].clientHeight;
x_index++;
if (x_index>=x_index_max) {
x_index=0;
}
}
};
window.onload = init;
window.onresize = init;
</script>
</head>
<body>
<header class="header">
<nav>
<ul class="enjoy">
<li class="text"><a href="#About" id="link_sample">ABOUT</a< /li>
<li class="text"><a href="#Works" id="link_sample">WORKS</a></li>
<li class="text"><a href="#Archive" id="link_sample">Archive</a></li>
</ul>
</nav>
</header>
<div class="wrapper">
<div class="item imgbox" style="height: 290px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 250px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 290px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 240px;"><img src="dfasfasdf.jpg " class="fadein"></div>
<div class="item imgbox" style="height: 280px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 270px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 240px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 260px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 220px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 230px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 210px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 290px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 250px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 290px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 240px;"><img src="dfasfasdf.jpg " class="fadein"></div>
<div class="item imgbox" style="height: 280px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 270px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 240px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 260px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 220px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 230px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 210px;"><img src="dfasfasdf.jpg" class="fadein"></div>
</div>
</body>
</html>
-------------------
ただ、結局、どこ空きがあるか？を見てないと、
特定の場所が「ガラッ」とあいた感じになってしまう事もあり
あんまり、美しくなかったりはしますね。。
なので、次のYラインに来た時、
最小のYを見つけて、そこにパーツを置く。
を繰り返した方が、敷き詰め感が増し増す。
ただ、X方向配置、その後Y方向？って
雰囲気が壊れるので、表示される順番が、
グダグダになるという特性はどうしてもあるでしょうね。
多分、それやると、思ってる通りの敷き詰め感には
なるかと思います＾＾

回答No.2

AsarKingChang

>cssだけでこのcssを書き換えて画面いっぱいにmasonryの様な
>レイアウトを敷き詰める方法も知りたいです。
>上のメニュー画面より下に敷き詰めようと考えております。
敷き詰めるだけでいいなら、floatか、flexだけでできますよ。

--------

<html>
<body>
<header class="header">
<nav>
<ul class="enjoy">
<li class="text"><a href="#About" id="link_sample">ABOUT</a< /li>
<li class="text"><a href="#Works" id="link_sample">WORKS</a></li>
<li class="text"><a href="#Archive" id="link_sample">Archive</a></li>
</ul>
</nav>
</header>
<!-- 本来ここにあるべきではないが、説明のためにここに配置 -->
<style>
.wrapper {
display: flex;
flex-wrap: wrap;
}
/* 1つ当たりのitem imgboxが見えないので、背景を色付けただけ */
.imgbox {
background-color:pink;
}
/* 嘘画像を緑として、サイズを適当に180x200とみなす */
img {
background-color:green;
width:180;
height:200;
}
</style>
<div class="wrapper">
<div class="item imgbox" style="height: 290px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 250px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 290px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 240px;"><img src="dfasfasdf.jpg " class="fadein"></div>
<div class="item imgbox" style="height: 280px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 270px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 240px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 260px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 220px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 230px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 210px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
</div>
</body>
</html>

--------

基本的に高さを「見てない」ので、縦に関して揃わないですが、
敷き詰めるだけならそれで行けます。
しかしその、「縦」の隙間を詰めたい？となると、
HTML/CSSだけでは無理なので、JSの力を借りるしかありません。
ってのも、このやり方
「縦が自動＝つまり、要素としてはサイズ０なんです」
なので、CSSだけでは計算ができない！
ということにはなりますが。

一応質問の
メニューの下のみで開始され、それ以外を全部敷き詰めた物。
さらに、JavaScriptを使わずCSSのみで！
という事では、こうなります。

お礼

回答ありがとうございます。
なるほど縦はcssだけでは難しいんですね。
となると、やっぱりmasonry先生に頼むしかないかな・・・
（masonry.jsなしでも一応できたのだが・・・）
masonry先生は使いづらい。

補足

すみません、htmlの続きです。
</body>
<script>

$(function () {

var totalRows = 4,
itemCol = 0;
for (var rowCount = 0; rowCount < totalRows; rowCount++) {
newCol = document.createElement('div');
newCol.className = 'col';
document.getElementsByClassName('wrapper')[0].appendChild(newCol);
}

for (var itemCount = 0; itemCount < document.getElementsByClassName('item').length; itemCount++) {
document.getElementsByClassName('col')[itemCol].appendChild(document.getElementsByClassName('item')[0]);
if (itemCol < totalRows - 1) {
itemCol++;
} else {
itemCol = 0;
}
}
});
</script>
<script>

$(function () {
$(window).scroll(function () {
$('.fadein').each(function () {
var position = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > position - windowHeight + 500) {
$(this).addClass('active');
}
});
});
});

</script>

</body>

</html>

回答No.1

AsarKingChang

CSSのみで、よくわからんかった＾＾
該当部だけ抜粋したやつ、作ってくれたら調査はするよ～
（わたしでよければね！）

お礼

回答ありがとうございます。
因みにこちらがＨＴＭＬです。
<!DOCTYPE html>
<html lang="ja">

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
</head>

<body>

<header class="header">

<nav>
<ul class="enjoy">
<li class="text"><a href="#About" id="link_sample">ABOUT</a< /li>
<li class="text"><a href="#Works" id="link_sample">WORKS</a></li>
<li class="text"><a href="#Archive" id="link_sample">Archive</a></li>
</ul>
</nav>
</header>

<div class="wrapper">
<div class="item imgbox" style="height: 290px;"><a href="#illust"><img src="dfasfasdf.jpg" alt="girl"
class="fadein"></a></div>
<div class="item imgbox" style="height: 250px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 290px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 240px;"><img src="dfasfasdf.jpg " class="fadein"></div>
<div class="item imgbox" style="height: 280px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 270px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 240px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 260px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 220px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 230px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 210px;"><img src="dfasfasdf.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
<div class="item imgbox" style="height: 200px;"><img src="sdfsafasfas.jpg" class="fadein"></div>
</div>

</body>
<script>

$(function () {

var totalRows = 4,
itemCol = 0;
for (var rowCount = 0; rowCount < totalRows; rowCount++) {
newCol = document.createElement('div');
newCol.className = 'col';
document.getElementsByClassName('wrapper')[0].appendChild(newCol);
}

補足

因みに文字が書けなくなったので補足に書きますが
masonry.jsやらimagesloaded.js等は全く使っておりません。
cssだけでこのcssを書き換えて画面いっぱいにmasonryの様な
レイアウトを敷き詰める方法も知りたいです。
上のメニュー画面より下に敷き詰めようと考えております。