如何将 masonry bindResize 与 bootstrap 一起使用?
how to use masonry bindResize with bootstrap?
我正在使用 zenphoto、bootstrap 和 masonry 制作照片库模板。
Masonry 在第一次加载时运行良好,但不会在页面调整大小时重新加载。
我想我必须使用 masonry bindResize() 方法,但我应该如何将它与 bootstrap 一起使用?
有生成的 html 代码,您可以在此处查看它的运行情况:http://test.vincentbourganel.fr/pages/portfolio
在此先感谢您的帮助。
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="post clearfix">
<p>Voici une sélection de photos de ma <a title="galerie" href="/page/gallery">galerie</a>.</p>
<script type="text/javascript" src="/themes/zpBootstrap/js/jquery.masonry.min.js"></script>
<div id="portfolio-wrap" style="margin: 0; padding: 0;">
<ul id="portfolio" class="list-inline" style="margin: 0; padding: 0;">
<li class="portfolio-item" style="margin: 10px;">
<a class="colorbox" href="/albums/evenements-familiaux/20140824-randonnee-familiale-vercors/_mg_2141.jpg" title="Le Grand Veymont">
<img src="/cache/evenements-familiaux/20140824-randonnee-familiale-vercors/_mg_2141_h150_thumb.jpg" alt="Le Grand Veymont" class="ombre" height="150" />
</a>
</li>
<li class="portfolio-item" style="margin: 10px;">
<a class="colorbox" href="/albums/20101111-voyage-marseille/img_4458.jpg" title="Calanque d'En-Vau I">
<img src="/cache/20101111-voyage-marseille/img_4458_h150_thumb.jpg" alt="Calanque d'En-Vau I" class="ombre" height="150" />
</a>
</li>
<li class="portfolio-item" style="margin: 10px;">
<a class="colorbox" href="/albums/groupe-photo-ecully/portraits_urbains/_mg_3158.jpg" title="_mg_3158">
<img src="/cache/groupe-photo-ecully/portraits_urbains/_mg_3158_w150_thumb.jpg" alt="_mg_3158" class="ombre" width="150" />
</a>
</li>
<li class="portfolio-item" style="margin: 10px;">
<a class="colorbox" href="/albums/20100723-voyage-irlande/img_3779.jpg" title="Mizen Head">
<img src="/cache/20100723-voyage-irlande/img_3779_h150_thumb.jpg" alt="Mizen Head" class="ombre" height="150" />
</a>
</li>
[...there is a lot of other pictures...]
</ul>
</div>
<script type="text/javascript">
$(function(){
var $container = $('#portfolio-wrap');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.portfolio-item',
columnWidth: 5
});
});
});
</script>
</div>
</div>
</div>
</div> <!-- /.container -->
首先,您遇到错误是因为您在 Masonry v2 中使用了 "isResizeBound",它适用于 Masonry v3。如果您想继续使用旧的 Masonry 版本,您需要将其更改为 "isResizable"。
见下文。
否则升级到 v3(您还需要单独加载 imagesloaded.js,因为它不再是 v3 中砌体的一部分)
$(function(){
var $container = $('#portfolio-wrap');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.portfolio-item',
isResizable: false,
columnWidth: 5
});
});
});
我正在使用 zenphoto、bootstrap 和 masonry 制作照片库模板。 Masonry 在第一次加载时运行良好,但不会在页面调整大小时重新加载。 我想我必须使用 masonry bindResize() 方法,但我应该如何将它与 bootstrap 一起使用?
有生成的 html 代码,您可以在此处查看它的运行情况:http://test.vincentbourganel.fr/pages/portfolio
在此先感谢您的帮助。
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="post clearfix">
<p>Voici une sélection de photos de ma <a title="galerie" href="/page/gallery">galerie</a>.</p>
<script type="text/javascript" src="/themes/zpBootstrap/js/jquery.masonry.min.js"></script>
<div id="portfolio-wrap" style="margin: 0; padding: 0;">
<ul id="portfolio" class="list-inline" style="margin: 0; padding: 0;">
<li class="portfolio-item" style="margin: 10px;">
<a class="colorbox" href="/albums/evenements-familiaux/20140824-randonnee-familiale-vercors/_mg_2141.jpg" title="Le Grand Veymont">
<img src="/cache/evenements-familiaux/20140824-randonnee-familiale-vercors/_mg_2141_h150_thumb.jpg" alt="Le Grand Veymont" class="ombre" height="150" />
</a>
</li>
<li class="portfolio-item" style="margin: 10px;">
<a class="colorbox" href="/albums/20101111-voyage-marseille/img_4458.jpg" title="Calanque d'En-Vau I">
<img src="/cache/20101111-voyage-marseille/img_4458_h150_thumb.jpg" alt="Calanque d'En-Vau I" class="ombre" height="150" />
</a>
</li>
<li class="portfolio-item" style="margin: 10px;">
<a class="colorbox" href="/albums/groupe-photo-ecully/portraits_urbains/_mg_3158.jpg" title="_mg_3158">
<img src="/cache/groupe-photo-ecully/portraits_urbains/_mg_3158_w150_thumb.jpg" alt="_mg_3158" class="ombre" width="150" />
</a>
</li>
<li class="portfolio-item" style="margin: 10px;">
<a class="colorbox" href="/albums/20100723-voyage-irlande/img_3779.jpg" title="Mizen Head">
<img src="/cache/20100723-voyage-irlande/img_3779_h150_thumb.jpg" alt="Mizen Head" class="ombre" height="150" />
</a>
</li>
[...there is a lot of other pictures...]
</ul>
</div>
<script type="text/javascript">
$(function(){
var $container = $('#portfolio-wrap');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.portfolio-item',
columnWidth: 5
});
});
});
</script>
</div>
</div>
</div>
</div> <!-- /.container -->
首先,您遇到错误是因为您在 Masonry v2 中使用了 "isResizeBound",它适用于 Masonry v3。如果您想继续使用旧的 Masonry 版本,您需要将其更改为 "isResizable"。 见下文。 否则升级到 v3(您还需要单独加载 imagesloaded.js,因为它不再是 v3 中砌体的一部分)
$(function(){
var $container = $('#portfolio-wrap');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.portfolio-item',
isResizable: false,
columnWidth: 5
});
});
});