кладка javascript не работает

0

Привет всем, у меня проблема с javascript-кладкой, вот код, это всего лишь тестовая часть, пожалуйста, помогите мне....

Я пробовал этот код, но это не работает, пожалуйста, помогите мне.. спасибо заранее..

любая помощь приветствуется...

<html>

<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://masonry.desandro.com/jquery.masonry.min.js">    </script>
 <script type="text/javascript" src="https://raw.github.com/desandro/imagesloaded/master/jquery.imagesloaded.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

var $container = $('.portfolio-container');
  $container.imagesLoaded(function(){
    $container.masonry({
      itemSelector : '.break',
      columnWidth : 129
  });
});

});
</script>

<style type="text/css">
 .break {
 float: left;
 width: 129px;
 margin: 3px;
background-color:blue;

 }
 .break1{height:30px;}
 .break2{height:50px;}
 .break3{height:20px;}
 .break4{height:70px;}
 </style>

 </head>

 <body>

 <div class="portfolio-container">

 <?php 
        for ($i=1; $i<9; $i++){
        ?>
            <div class="break1 break" >

            </div><div class="break2 break" >

            </div><div class="break3 break">

            </div><div class="break4 break" >

            </div>
        <?php } ?>

</div>

</body>

</html>
  • 0
    Это код И просто тестовый образец. Где настоящая вещь?
  • 0
    Где находится тег js <script type="text/javascript" language="javascript"> ?
Теги:
jquery-masonry

1 ответ

1

Проблема в том, что оба пути /URL, которые вы использовали (для кладки и плагинов с изображениями), ошибочны.

Используйте URL-адреса из CDN, если хотите

<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.1.1/masonry.pkgd.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>

или загружать эти файлы и ссылаться на них.

Демо на странице http://jsfiddle.net/C2mCw/1/


Помимо неправильных URL-адресов, используемая columnWidth опция columnWidth должна учитывать полную ширину каждого элемента (включая paddings/marginins).

Итак, поскольку у вас есть margin:3px .break элементах .break, вам придется учитывать 6 дополнительных пикселей

так что вы действительно должны установить его на 135 вместо 129

$container.masonry({
    itemSelector : '.break',
    columnWidth : 135
});

Демо на http://jsfiddle.net/C2mCw/2/

Ещё вопросы

Сообщество Overcoder
Наверх
Меню