标签: jquery-masonry
使用jquery实现无限滚动
我正在开发一个使用jQuery Masonry和Infinite Scroll插件的项目,使用他们的API从instagram加载"n"张图片.看看这个简短的例子,我的理解是我需要事先呈现要呈现的html页面:
<nav id="page-nav">
<a href="pages/2.html"></a>
</nav>
问题是,我真的不知道将检索多少张图片.以下是我一次检索20张照片的示例.
$(document).ready(function(){
var access_token = location.hash.split('=')[1];
if (location.hash) {
$.ajax({
type: "GET",
dataType: "jsonp",
cache: false,
url: "https://api.instagram.com/v1/users/MY_USER_ID/media/recent/?access_token=MY_ACCESS_TOKEN",
success: function(data) {
for (var i = 0; i < 20; i++) {
$("#instafeed").append("<div class='instaframe'><a target='_blank' href='" + data.data[i].link +"'><img src='" + data.data[i].images.standard_resolution.url +"' /></a></div>");
}
}
});
} else {
location.href="https://instagram.com/oauth/authorize/?display=touch&client_id=MY_CLIENT_ID&redirect_uri=MY_URI";
}
});
我想我需要一个分页机制,但基于上面提到的教程,我相信我首先需要预先定义要加载的html页面.所以现在我的问题
- 这是否意味着这个插件(Infinite Scroll)需要在目录中包含"n"个html文件才能实现无限滚动？
- 如果我不知道我将拥有多少页,是否可以使用相同的插件实现无限滚动.甚至更好,甚至不必创建物理html文件？
- 如何实现这种分页？(即只要用户继续向下滚动,就会加载20张照片的大块)在网上没有那么多文档,你能通过演示或描述提供一小步吗？
亲切的问候
推荐指数
解决办法
查看次数
砌体可以用作RTL(从右到左)的方向
推荐指数
解决办法
查看次数
imagesLoaded方法不使用JQuery砌体和无限滚动
我一直在使用JQuery砌体,现在我正在添加无限滚动.在几乎每个砖石"砖"中都有图像,在我使用无限滚动之前,图像加载得很好,一切都很棒.我为无限滚动添加了javascript的下一部分,并在里面添加了imagesLoaded方法,但是当添加新砖时,它们全部堆积在顶部.我的假设是我没有在无限滚动回调中正确添加imagesLoaded方法,但我无法找到我的错误.这是代码
<script type="text/javascript">
$(function(){
var $container = $('#container');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.tile',
columnWidth : 240
});
});
var $container = $('#container');
$container.infinitescroll({
navSelector : ".flickr_pagination",
// selector for the paged navigation (it will be hidden)
nextSelector : "a.next_page",
// selector for the NEXT link (to page 2)
itemSelector : "div.tile"
// selector for all items you'll retrieve
},
// trigger Masonry as a callback
function( newElements ) {
var $newElems = $( newElements );
$container.imagesLoaded(function() {
masonry( 'appended', $newElems …推荐指数
解决办法
查看次数
将jquery砌体整合到zurb基础网格中
我遇到了将砌体与Foundation网格布局集成的问题.基本上具有相同宽度的图像具有不同的高度,砖石按预期工作,但在某些断点处,网格仅具有两列布局而不是通常的四列.
但是,如果您继续最小化浏览器宽度,则返回四列,因此不能显示它们的空间.
var $container = $('#work_grid');
$container.imagesLoaded( function(){
$('#work_grid').masonry({
itemSelector: '.work_item',
isAnimated: true,
});
HTML
<div class="row">
<div class="twelve columns">
<div id="work_grid" class="block-grid four-up">
<li class="work_item"><img src="stylesheets/images/work1.jpg" alt=""></li>
<li class="work_item"><img src="stylesheets/images/work2.jpg" alt=""></li>
<li class="work_item"><img src="stylesheets/images/work3.jpg" alt=""></li>
<li class="work_item"><img src="stylesheets/images/work4.jpg" alt=""></li>
<li class="work_item"><img src="stylesheets/images/work5.jpg" alt=""></li>
<li class="work_item"><img src="stylesheets/images/work6.jpg" alt=""></li>
<li class="work_item"><img src="stylesheets/images/work7.jpg" alt=""></li>
</div> <!-- /.block-grid four-up -->
</div> <!-- /.twelve columns -->
</div> <!-- /.row -->
推荐指数
解决办法
查看次数
让角度砌体工作它说没有方法'imagesLoaded'
我试图通过passy使用无限滚动指令来进行角度砌体,但我遇到了一些问题.我在这里用plnkr做这件事.它在控制台中表示错误,TypeError:Object [object Object]没有方法'imagesLoaded'.
这是我的HTML
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="masonry@*" data-semver="2.1.0-7" src="//cdnjs.cloudflare.com/ajax/libs/masonry/2.1.07/jquery.masonry.min.js"></script>
<script data-require="imagesloaded@*" data-semver="v3.0.2" src="http://desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="angular-masonry.js"></script>
<script src="myApp.js"></script>
</head>
<body ng-app="myApp" ng-controller="DemoController">
<div masonry="">
<img class="repeated-img masonry-brick" ng-repeat="image in images" ng-src="http://placehold.it/225x{{image.height}}/{{image.color.bg}}/{{image.color.text}}&text={{image.num}}" />
</div>
<div scroll-trigger="loadMore()" threshold="100">Trigger element</div>
</body>
</html>
和我的无限滚动指令和应用程序模块
var myApp = angular.module('myApp', ['wu.masonry']);
myApp.controller('DemoController', function($scope) {
$scope.images = [
{num: 1, height:400}, {num: 2, height:250},
{num: 3, height:225}, {num: 4, …推荐指数
解决办法
查看次数
jQuery Masonry无限滚动和图片与我的tumblr主题重叠问题
我是编程(javascript)的新手,但过去几天我做了很多研究,以使我的tumblr主题正常工作.我知道我的问题很常见,但似乎我没有足够的知识来正确整合许多类似例子中给出的代码部分.
我的主题应该覆盖tumblr的"每页15个帖子"限制,并且通过"无限滚动"选项,它应该将我的所有帖子(所有这些图片)放在一个无尽的页面中.嗯,事实并非如此.在这里得到一点帮助后,我设法将我的{block:Posts}包裹起来,然后在砌体()调用中进行了几次随机更改我最终得到了这个
你可以看到我的图片没有重叠(最后!)但是在15个帖子之后,它看起来像是创建了一个新页面并且最后的图片没有正确对齐.
我的jQuery砌体代码是这样的:
<script type="text/javascript">
$(window).load(function () {
$('.autopagerize_page_element').masonry(),
$('.autopagerize_page_element').infinitescroll({
navSelector : "div.navigation",
// selector for the paged navigation (it will be hidden)
nextSelector : "div.navigation a#nextPage",
// selector for the NEXT link (to page 2)
itemSelector : ".autopagerize_page_element",
// selector for all items you'll retrieve
bufferPx : 10000,
extraScrollPx: 12000,
loadingImg : "http://b.imagehost.org/0548/Untitled-2.png",
loadingText : "<em></em>",
},
// call masonry as a callback.
function() { $('.autopagerize_page_element').masonry({ appendedContent: $(this) }); }
);
});
</script>
我知道,它是一团糟...真的很感激一些帮助.
推荐指数
解决办法
查看次数
Jquery-Masonry几乎总是空的空间
我一直在尝试砌体,但不能让它完全按照我的意愿工作.我使用的元素在宽度和高度上有所不同,但都适合网格(4种不同的尺寸,所有的最小+边距的倍数).我还计算了一个可以精确拟合的元素分布(最小的7个,其他4个).
然而,砌体能够整齐地适应它们是罕见的,有时会有一个潜伏在底部,有时几个是错位的.总是如此,在一个视图中,我可以看到需要移动哪些物品才能适合它.
有没有办法让砌体在移动元素方面更具侵略性？或者让它重复两次以确保没有空格？
推荐指数
解决办法
查看次数
jquery masonry在初始页面加载时崩溃,单击"主页"菜单按钮后工作正常
我的jquery砌体设置在初始页面加载时奇怪地工作.它似乎将第一行中的图像放在第一行中,第二行与第一行重叠,第三行相同.页面加载后,您可以单击主页按钮或徽标并重新加载页面,它工作正常.
我在functions.php中有这个代码,用于将masonry和jquery脚本放入:
if (!is_admin()) {
wp_enqueue_script('jquery');
wp_register_script('jquery_min', get_template_directory_uri(). '/js/jquery.min.js', array('jquery'), '1.6.1' );
wp_enqueue_script('jquery_min');
wp_enqueue_script('jquery');
wp_register_script('jquery_masonry', get_template_directory_uri(). '/js/jquery.masonry.min.js', array('jquery'), '2.1.06' );
wp_enqueue_script('jquery_masonry');
}
这个脚本在head.php中:
<?php if (is_page(2)) { ?>
<script>
$(function(){
$('#content').masonry({
// options...
itemSelector : '.product',
columnWidth : 310,
isAnimated: true,
animationOptions: {
duration: 700,
easing: 'linear',
queue: false
}
});
});
</script>
<?php } ?>
这是该网站的链接.
任何想法为什么这在初始页面加载时奇怪地加载？
我很擅长编写任何东西,所以请善待.
推荐指数
解决办法
查看次数
ios 7浏览器套件黑色边框围绕div元素
我在iOS7的浏览器中遇到一个奇怪的错误,其中div元素周围出现黑线.但是当你放大一个元素时,这些线条就会消失.有谁知道是什么原因导致这个奇怪的错误？在iOS6中,没有任何线条出现.它发生在这个网址上:http://www.tristanfrencken.com/
希望有人可以帮助我!
推荐指数
解决办法
查看次数
无法让Masonry-Rails Gem在我的应用中运行
所以我已经搜索了stackoverflow并发现了一些类似的文章,但没有任何对我有用.我正在创建一个rails应用程序,我想使用Masonry进行布局.我曾尝试上传JS在描述这个职位,但我无法得到它,无论多少次,我试图努力(是的,我不匹配的所有正确的ID和类).我知道gem正在工作,因为CSS加载正常,我只是不能让JS工作.这就是我现在所拥有的
的Gemfile:
# masonry layout
gem 'masonry-rails'
application.js中:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree .
//= require masonry/jquery.masonry
index.html.erb:
<div class="center">
<div id="masonry-container" class="transitions-enabled infinite-scroll clearfix">
<%= render @products %>
</div>
<div class="paginator">
<%= will_paginate @products, renderer: BootstrapPagination::Rails %>
</div>
</div>
_products.html.erb
<div class="box">
<% gfyid = product.gfy.to_s.gsub("http://gfycat.com/", "") %>
<h2><%= product.name %></h2>
<div class="gfySize">
<div class="gfyitem" data-title=false data-autoplay=false data-controls=false data-expand=false data-id="<%= gfyid %>"></div>
</div>
我很迷茫,我一直在努力研究这一切.CSS工作/看起来很好,但我只是在努力与js.非常感谢任何帮助,非常感谢你!
推荐指数
解决办法
查看次数