jQuery - Каменная кладка пока не работает, пока не работает?

Я пробовал более 7 часов, чтобы отсортировать макет, я хочу, чтобы конечный продукт выглядел что-то в этом направлении -! want it to look like jQuery - Каменная кладка пока не работает, пока не работает?

вместо этого я получаю это! currently looks like

Heres кодовыми Thats используется

HTML -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 

<head> 

<title>_Box</title> 

<link href="styles.css" rel="stylesheet" type="text/css"> 

<body> 

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="masonry.js"></script> 
<script> 
    $(function(){ 
    $('#container').masonry({ 
    columnWidth: 150, 
    itemSelector: 'div' 
    }); 
}); 
</script> 

<div id="container" class="clearfix masonry"> 

<div class="item1"><img src="images/eventbox.png"></img></div> 
<div class="item3"><img src="images/forumbox.png"></img></div> 
<div class="item2"><img src="images/weekbox.png"></img></div> 
<div class="item2"><img src="images/weekbox.png"></img></div> 
<div class="item2"><img src="images/weekbox.png"></img></div> 
<div class="item2"><img src="images/weekbox.png"></img></div> 
<div class="item3"><img src="images/top10box.png"></img></div> 
<div class="item1"><img src="images/eventbox.png"></img></div> 

</div> 

</head> 
</body>

CSS -

html { 
    height:100%; 
} 

body { 
    width:900px; 
    height:100%; 
    margin:0 auto; 
    margin-top:100px; 
    background-image: url(images/gridbg.png); 
} 

#container { 
    width:900px; 
} 

.item1,.item2,.item3 {margin:5px;} 
.item1 {width:350px;} 
.item2 {width:175px;} 
.item3 {width:150px;}

Любые идеи? потому что кажется, ничего не будет работать

источник

2013-03-30 box

'$ ('# контейнер') Кладка ({ ColumnWidth: 150, itemSelector: 'DIV' });' – Jashwant

@Jashwant Удалить последнюю запятую или более старые версии IE выдает ошибку – Andreas

, которая была опечатка. Я никогда этого не делаю, даже не в php :) – Jashwant

Ну вот fiddle, что я сделал.

Я заметил, что, поместив небольшое количество колонок, он улучшает работу масонства.

Так что я изменил сумы на что-то вроде этого:

$(function() { 
    $('#container').masonry({ 
     columnWidth: 1, 
     itemSelector: 'div' 
    }); 
});

Кроме того, добавление фиксированного веса/высота может помочь. Особенно для обработки полей вокруг предмета, потому что кладка, похоже, имеет некоторые проблемы с полями между элементами.

Так что если ваши большие предметы 350px, убедитесь, что предметы, которые находятся под ними, не более (350 -(2*margin)) /2 px, так что они размещают их правильно. .

источник

2013-03-30 21:31:02

jQuery - Каменная кладка пока не работает, пока не работает?

ответ

Смежные вопросы